Skip to content

Instantly share code, notes, and snippets.

@daneden

daneden/Component.js

Last active Aug 5, 2018
Embed
What would you like to do?
styled-components will generate duplicative style declarations when props change the value for a rule. This is fine for e.g. the example below, where the ruleset is already small, but what if we have a dozen or more common styles for the two variants?
const Component = styled.div`
display: inline-block;
color: ${props => props.red ? 'red' : 'green'};
`
export default Component
/* Component.js will result in: */
.foo {
display: inline-block;
color: red;
}
.bar {
display: inline-block;
color: green;
}
/* rather than: */
.foo {
display: inline-block;
}
.bar {
color: red;
}
.baz {
color: green;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.