One of the most loved features of styled-components is the ability to dynamically create CSS based on a component's props. One reason to use this feature is to create alternate versions of a component. These alternate versions would then be encapsulated within the styled component itself. The following is an example of a <Title /> where the text could be either centered or left-aligned and optionally underlined.
const Title = styled.h1`
text-align: ${props => props.center ? "center" : "left"};
text-decoration: ${props => props.underline ? "underline" : "none"};
color: white;
background-color: coral;
`;
render(
<div>
<Title>I'm Left Aligned</Title>
<Title center>I'm Centered!</Title>
<Title center underline>I'm Centered & Underlined...