Skip to content

Instantly share code, notes, and snippets.

@lopezjurip
Last active Mar 22, 2018
Embed
What would you like to do?
styled-components ssr problems with bad usage
/* FOCUS IN THE PURPLE (COOL) <a /> component */
// GOOD ----------------------------------
const Container = styled("div")``;
const Link = styled("a")`
color: green;
`;
const LinkCool = styled(Link)`
color: purple;
`;
const Text = styled("p")`
color: black;
`;
const App = props => (
<Container {...props}>
<Link href="/">Home</Link>
<Text>
Click <LinkCool href="/purple">purple</LinkCool>
</Text>
</Container>
);
// GOOD ----------------------------------
const Container = styled("div") ``;
const Link = styled("a") `
color: green;
`;
const Text = styled("p") `
color: black;
${Link}: {
color: purple;
}
`;
const App = props => (
<Container {...props}>
<Link href="/">Home</Link>
<Text>
Click <Link href="/purple">purple</Link>
</Text>
</Container>
);
// BAD ----------------------------------
const Container = styled("div") ``;
const Link = styled("a") `
color: green;
`;
const Text = styled("p") `
color: black;
a {
color: purple;
}
`;
const App = props => (
<Container {...props}>
<Link href="/">Home</Link>
<Text>
Click <a href="/purple">purple</a>
</Text>
</Container>
);
// BAD ----------------------------------
const Container = styled("div") ``;
const Link = styled("a") `
color: green;
`;
const Text = styled("p") `
color: black;
.cool {
color: purple;
}
`;
const App = props => (
<Container {...props}>
<Link href="/">Home</Link>
<Text>
Click <a className="cool" href="/purple">purple</a>
</Text>
</Container>
);
// BAD ----------------------------------
const Container = styled("div") ``;
const Link = styled("a") `
color: green;
`;
const Text = styled("p") `
color: black;
#purple {
color: purple;
}
`;
const App = props => (
<Container {...props}>
<Link href="/">Home</Link>
<Text>
Click <a id="#purple" href="/purple">purple</a>
</Text>
</Container>
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment