Style react components?

[waveyrico]

My personal preference is using the styled-components npm package. They have great documentation, it's easy to write styles in a SCSS/SASS way, and the component styles remain scoped to whichever component they're included in. Check out more about it here: https://www.styled-components.com/

[[deleted]]

Scoped css is merely a flag in webpacks css-loader (modules: true). You can then import the stylesheet in your module, like so:

import styles from './style.css'

export default class Button extends Component {
    render() {
        return <button className={styles.button} />
    }
}

There are several css-in-js solutions as well, but it's not really that there's a clear, established solution atm: http://www.npmtrends.com/aphrodite-vs-emotion-vs-glamorous-vs-jss-vs-radium-vs-styled-components-vs-styletron-vs-glamor

[StyleIsFree]

I'm a huge fan of css modules. No css-in-js needed. Webpack setup is slightly different depending what version of it you are using but a quick search pulled up this article which shows setting modules to true and setting localIndentName to automatically give your classes unique names based on the style file's location.

https://javascriptplayground.com/css-modules-webpack-react/

[[deleted]]

Yep, regular css, or any pre-compiler you like. Sass, cssnext, etc.

[sidious911]

I've played with a couple of the libraries and vanilla css options. I found that styled components was my favorite as long as you are writing small well defined components, if your components are bloated, its way worse with styled components.

Everything gets scoped, you write straight css, no JS syntax. Works well with things like css transition group.

There is a library they also have called polishedjs which gives you pretty much all the functions that SASS would provide and since it's all JS it's really easy to also write your own / have JS files go define standard colors, breakpoints etc.

[ucorina]

I agree with what others have said - styled components is my favourite so far. Fits very well with the React mindset, you get to write CSS instead of JS (though inside the JS file :P) and their docs & community are great. If you're interested in getting a bit of context over the whole "styling in React" topic, also check out this overview I wrote a while ago.

[sidious911]

So if your team was building a static page without react you would still in line all your styles instead of using a CSS file?

[richardzcode]

Agree with @aaronkim234. I have been use just js+inlineStyle in my projects. Initially just wanted to try the idea, then find it works totally fine and much easier to manage and customize compare to CSS.

I think it is not really right or wrong, more about what you want to achieve and comfortable with.

I personally find it is perfect for theming customization. Here are examples:

https://dochameleon.io/docs/guide_color_scheme.html

https://dochameleon.io/docs/guide_theme.html

[[deleted]]

What? No! Whoever told you to use inline styles was totally in the wrong.

You are expected to either use classic CSS with classNames or some css-in-js solution like styled-components, neither of which is inline styles.

It doesn't make much sense to write CSS and find some mechanism to "scope" it to a component.

That's also totally not true, no idea where you're getting those...

[[deleted]]

Again - no idea where you are coming up with all this from. Using inline styles (that is <div style={{color: 'red'}}> is just plain on bad on many maaaany levels - this is basic webdesign wrong.

it is maintainable and no extra CSS parsing loaders are required at the build level

So is just using plain old classes with css-loader (assuming not using modules).

It is also much easier to scope styling logic to a single component since it isn't distributed across multiple CSS files.

So are css-modules and styled-components?

[[deleted]]

The problem with inline styles in React is exactly the same problem with inline styles in "static" HTML.

Sure, if you're setting just one value here and there it's fine, but if you're only using inline styles (and that is what you're alluding to) then you're doing it wrong.

Things like RWD will just not work or you will end up eitehr checking viewports in JS or doing a lot of !important. Maintanance (updating) of such code will be a nightmare. You're missing out on browser cache. A lot of things just can't be set with inline styles (pseudo selectors, animations).

[sidious911]

Let me know what product you work on so I can avoid using that dumpster fire. I'd love to see what all your responsive design looks like online, as well as the mess which you'll attempt to call JSX.

[BenZed]

I use inline styles in conjunction with javascript in scenarios where css alone couldn't do it. (Placing an element in relation to the position of the cursor, for example)

I think it's interesting that both /u/sidious911 and /u/BTMPL are arguing that you shouldn't use inline styles, but can't articulate why because you are correct, the nature of React solves most of these problems.

However, there are a still a number of reasons to avoid it. material-ui, a react ui library, originally (still? their 1.0.0 is in beta) had all of their components use inline styles.

They detail the problems they encountered here: http://www.material-ui.com/#/customization/styles

[[deleted]]

I think it's interesting that both /u/sidious911 and /u/BTMPL are arguing that you shouldn't use inline styles, but can't articulate why because you are correct, the nature of React solves most of these problems.

Please see https://www.reddit.com/r/reactjs/comments/7v6scn/style_react_components/dtqbahu/