1) I can directly style multiple components within a file, each having their own style.

2) Since it's in javascript, I can reference JS variables within the file. I can derive CSS values from props passed into the component: styled.div`color: ${props => props.userColor}`

3) I can extend other styled components' styles - i have a small shared library of central components like buttons, inputs. I can extend those: styled(MyThemedButton)`color: ${props => props.specialColor}`

4) I can use awesome micro-libraries like styled-system to add parameterization to the JSX elements: const Foo = styled.div`${space}`. ... <Foo key='1' mx={1} my={2} />... <Foo key='2' mx={2} my={3} />

5) I can change the style of every single styled component with a ThemeProvider. styled.div`color: ${props => props.theme.headerColor}`

6) I can see everything related to the component in one single file.

The most immediate benefit is never having to think about and munge class names.

Your Button.scss would typically look like:

    .Button { ... }
    .Button--primary { ... }
    .Button--small { ... }
    .Button--alt { ... }

And then you need to repeat all those in Button.js (but really they're globals and anything could be using them...)

    return (
      <button className={classnames('Button', {
        'Button--alt': props.alt,
        'Button--primary': !props.secondary,
        'Button--small': props.small,
      }, props.className)}>
        Click Me
      </button>
    )

(I even skipped over the very first issue you run into, which is building up the className string, which is why people use the classnames helper everywhere.)

And that's the simple case with only one child component – usually there are even more dynamic class names to consider for all the possible states, and other children that need their own classes as well. Once you use a solution like Styled Components, building up classes using that damn classnames helper just seems so primitive and tedious. The duplication involved in keeping selectors from the CSS in sync with those actually used in the components also drives me nuts.

I recommend giving it a try.

Few quick reasons off the top of my head. - HMR works well - Theming, variables with things like ternary - Code reuse is better (Especially with theming) - Component can contain everything in one file - Extend other components easily - Better developer work flow - Contained class names

> HMR works well

Have you run into problems with hot reloading of stylesheets? Seems like the kind of problem that should be solved by now (for reference, LiveReload was doing CSS injection back in 2011, and maybe some other tool even earlier: https://web.archive.org/web/20110428025941/https://github.co...)

Isolating styles to the component.

If you use css-modules the styles will be isolated to your component unless you add :global() around them.

I think css-modules requires a bit more wiring up (though CRA 2 will bake it in without ejecting, I believe). Of course, styled-components and css-modules have the same lead developer, but it appears that css-modules isn't getting as much love, as discussed:

https://github.com/css-modules/css-modules/issues/187