React - css/style/className(s)

With a project started at an university for the design React was chosen. Functionally it was a great move, but I see it’s not a ‘pure’ React approach, mainly the styling. First pure CSS was used alongside the React components etc.
A move to use style={…} was easy (also not finished), but how about className?

That is pointing to CSS definition and can be like this: className=“buttons remove”. This makes it easy to get a specific ‘buttons’ rendering as also for others like ‘add’ or ‘change’ buttons etc.

Is it recommended to move those over to the React style={…} also? And how can it be written so not every buttons needs the whole css definition? Maybe the spread operator {…props}?

How about joined className to be found with classNames with React?

Is there consensus on which way is better yet? :smiley: Last I heard, there were lots of people who liked passing styles around as JavaScript objects, but also lots of people who liked using className with plain old CSS files. Last I looked, most of the style folks started as a result of this talk (whose comments have links to libraries that help) and the className folks use projects like React Shadow to address the same concerns.

Unless you really have a pressing need to keep your styles inside your components, use CSS all the way. You get cascading and a bunch of simple things that are much MUCH nicer than React’s approach.


Well, that talk I linked to describes the pressing reasons that are inherent to using CSS the way you recommend. In my experience, it doesn’t scale to complex sites. :\ But hey, it does work for the first few thousand lines.

1 Like