How do I encapsulate styles?

[giltig]

Hi,
we are converting a big project written with Polymer to React.
The biggest problem we face is the lack of encapsulated styling.
I would like to encapsulate my sass files with encapsulated styles among my components.
In the entire react web site and documentation there is almost no mentioning of styles.
Furthermore in chrome devtools under React plugin you have all the component properties except style. (not like devtools of the regular DOM).
I really like React and what your doing so how are you going to approach this problem?

[jimfb]

I assume you've seen this document on how we do inline styles: http://facebook.github.io/react/tips/inline-styles.html

Our styles behave same as browser styles. We do not yet have a solution as clean as the shadow DOM for style encapsulation, but the web has existed for many years without shadow DOM, so it is certainly possible to design websites using the browser's native style rules :).

One thing that you could do is define a style reset class, which resets the styles to their default, and then you can override the defaults with more specific selectors.

Alternatively, you could create a base inline-style object that has all your default styles, import that object everywhere, and when you want to apply a specific style, you copy that object and override the styles you want to set using Object.assign. If you want to get really fancy, you could have your components do the style merging (with the style-reset-object you create) automatically, so your webdevs can just use the components without seeing the style-reset code.

That's my two cents. cc @spicyj

PS: Since this is more of a usage question rather than a bug in React, I'm going to go ahead and close the issue. Feel free to continue the conversation in this thread (closing the issue mostly just takes it off our radar for dev purposes). An ideal place for questions like this would be StackOverflow.

[sophiebits]

I tend to recommend using BEM-esque class names that are globally unique, usually scoped by component name:

var MyComponent = React.createClass({
  render: function() {
    return (
      <div className="MyComponent">
        <button className="MyComponent__button">Hi!</button>
      </div>
    );
  }
});

and then in your CSS, try to avoid using descendant selectors, in favor of single class names. This tends to promote style isolation and separation of components – it makes it easier to compose components without the styles falling apart.

[iamdustan]

Suit is another great option because it has great nose tooling (rework) and a conformance validators to provide an automated safeguard that your styles are not bleeding.

[romaia]

This looks like an interesting solution: https://github.com/Wildhoney/ReactShadow

[kujohn]

Another potential solution is http://projects.formidablelabs.com/radium/

[acdlite]

I favor inline styles where possible, then when it gets too complex use something like BEM, as recommended by @spicyj. I also like SuitCSS, which pairs well with React in my experience.

[f1am3d]

I tend to recommend using BEM-esque class names that are globally unique, usually scoped by component name:

Хуета уродливая ваш BEM 🤢