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?

Component.js

const Component = styled.div`
  display: inline-block;
  color: ${props => props.red ? 'red' : 'green'};
`

export default Component

result.css

/* 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;
}