Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Styled Components API snippets
const Title = styled.h1`
font-size: 1.5em;
text-align: center;
color: palevioletred;
:hover {
color: red;
}
`;
// attrs, props, &
const Thing = styled.div.attrs({
tabIndex: 0,
margin: props => props.size || "1em",
})`
color: ${props => props.divColor || "palevioletred"};
.something {
border: 1px solid; // an element labeled ".something" inside <Thing>
}
&.foo {
background: orange; // <Thing> tagged with an additional CSS class ".foo"
}
`;
// Components className
const Link = ({ className, children }) => (
<a className={className}>
{children}
</a>
);
const StyledLink = styled(Link)`
font-size: 1em;
`;
const TomatoLink = styled(StyledLink)`
color: tomato;
`;
// Polymorphic style
const BlueThing = styled.div`
color: blue;
`;
<BlueThing as="span" />
<BlueThing as="a" />
<BlueThing as={MyComponent} />
// Component selector
const Link = styled.a`
background: papayawhip;
`;
const Icon = styled.svg`
transition: fill 0.25s;
${Link}:hover & {
fill: rebeccapurple;
}
`;
// Objects
const Foo = styled.div({
color: "rgb(97, 97, 97)",
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment