What is ?

What it's for?

Code example

// Create a Title component that'll 
// render an <h1> tag with some styles
const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

/* Create a Wrapper component that'll
 render a <section> tag with some styles*/
const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;

/* Use Title and Wrapper like any 
other React component – except they're styled!*/
render(
  <Wrapper>
    <Title>
      Hello World!
    </Title>
  </Wrapper>
);

Pros

  • Automatic critical CSS
  • No class name bugs
  • Easier deletion of CSS
  • Simple dynamic styling
  • Painless maintenance
  • Automatic vendor prefixing

Cons

  • 1
  • 2
  • 3
  • 4
  • 5

Styled Components

By Mikael Hadler

Styled Components

  • 296