javascript - Styled-Components vs functional component using the style parameter

Question

I just asked myself what the reason would be to use styled-components over a custom functional component in react other than saving a few LOC. Example code:

const StyledButton = (props) => (
  <button
    style={{
      color: '#E8E8E8',
      padding: '8px 16px',
    }}
    {...props}
  />
);

const jsx = () => <div><StyledButton>Click Me!</StyledButton></div>;

const StyledButton = styled.button`
  color: '#E8E8E8';
  padding: '8px 16px';
`;

const jsx = () => <div><StyledButton>Click Me!</StyledButton></div>;

Kind regards, Thomas

Answer 1

With styled-components you can leverage the full power of css, which means you can:

• Overwrite the css of child tags and classes
• Use pseudo classes such as :visited, :first etc.
• Use hover and other ui states
• Use css variables easily

Just as a few examples, but obviously anything else that css can do by default that would require extra javascript to do with just plain styles.

Also you can read more about the motivation behind styled-components here.