Using styled-components

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...