Styling react components

for those of you who has worked on react project and had the opportunity to style it to your taste, what is you prefer method?

I see some recommendations for inline styling in JavaScript, but that seems very inefficient and might be difficult to maintain and scale.

I can also create classes and write the style of those component in a stylesheet, but for multi-page apps, that seems like it’d load a lot css and not all of them are needed for different views.

I understand there are also other libraries that also help simply the process, but I’ve not tried them yet

This is largely a matter of preference but I’m happy to share my opinion. I started by styling inline (I don’t recommend it), then moved to a single SCSS sheet (better), but now I break them into a number of CSS files and I feel that this is the best approach for me.

As I’m sure you know, the React way to make apps is to make a number of distinct components that fit together (eg you may have an App.js component, a Header.js component, a Navbar.js component, etc). Since webpack allows you to import CSS into JS files, you can make a file called App.css, write styles specific to your App.js component and then import it directly into that component.

Update:

My original post implied that loading a CSS sheet via webpack to a react component will only effect JSX within that component. This is not the case. Nonetheless, I still really like writing a specific stylesheet for each component. One technique to achieve CSS private to the component would be prefixing all css selections with a classname specific to that component (annoying), or using SCSS (or whatever) to wrap everything in a child selection like this (less annoying):

.MyComponent {
   p { margin: 10px; }
   .someButton { color: hotPink; }
   .anotherClass { background: magenta; }
}
1 Like

I agree that it’s a matter of preference but I thought I would share my opinion, too, since I went the opposite way compared to @RadDog25. Just out of curiosity—does webpack support locally scoped CSS out of the box? I was under the impression that the importing mechanism still makes CSS imported into a component available globally (or maybe I did something terribly wrong :frowning:).

Anyhow! I started appreciating inline styling when I worked on the dungeon crawler project, particularly where I needed dynamic styling of certain components that rely on some of their parents’ states—it just felt very natural to me that one would simply pass states into the component, compute things if necessary, and have the styles of the component inlined.

Admittedly I still haven’t found the balance and I am still using CSS for components that I don’t intend to reuse and don’t need to be styled dynamically because it feels faster to change styles for everything in just a limited number of files even if. That’s probably only feasible because the projects I have done/are working on are small enough and/or that I’m still not very good at thinking the component way.

I haven’t tried any libraries yet but am planning to look into Radium (they list some compelling reasons to do things inline) first thing after finishing the last certificate (you may be interested in the first half of this video). I hope that helps! :slight_smile:

I tried almost every option out there and I am sticking with the styled components it’s a brilliant solution.

I use styled- components for smaller files and pull out those styles into another js file if they get too huge. The only downside is you can’t cache your CSS and JS separately you run into the same issue if you do inline styling too. :sob:

I’m of the opinion that there’s no good way to style React components yet. Both inline styles and stylesheets have their advantages, but neither is optimal. I stick with stylesheets because because 1) they don’t add extra dependencies, 2) they’re easy to others to understand, 3) they are the easiest to use consistently, 4) my code is cleaner if I write logic for class names instead of entire style objects, and 5) with proper bundling, I can get all of the advantages of inline styles with stylesheets. Having static analysis for styles is nice, but I think that an editor plugin is a better solution for that than ditching CSS.

With Webpack, you can import stylesheets into with your components and avoid loading unused code. This makes your JS files bigger, but because of the way browsers load external files, load times can be dramatically improved.

I think this has been the go to solution for me, as long as I keep it contain in classes, polluting the global namespace has not been an issue for me, but I’d prefer to have a central place to work with styles, just because it’s been how I’ve done it, and like @honmanyau says, it just feels faster.

It’d be nice If I can have a central style sheet not rendered or only used on fallback, and when that style sheet gets updated in any way, the component stylesheet updates with it

Nope, you are correct and I fixed my original post. I don’t have anything against inline styles but I really like to have one file that says “This is how this component works” and another that says “This is how this component looks”. Off course, this distinction can’t always be made cleanly.

1 Like

Regarding React components styling my team and I came up with a solution that I would like to share with you:

  • Each component has its own repo and webpack based dev-env. Including node sass, babel, eslint…
  • All Mixins and defined Sass Vars are declared as default values in one common place.
  • Every component has its own Sass file to host all styling code so is acessible to everyone even if has no idea about React.
  • Webpack has installed an ‘ExtractText’ plugin that allows strip apart a final pre-processed css file out of the js bundle.

I would love to hear your thought about this architecture!
Here is a card component example link :

And here are all the mixins and Sass var declarations: