样式反应组件

Question

I'm a big react fan. It's a really awesome tool for building UI but there are some problems which are difficult to get rid of without trouble.

One of them is styling components, the original 'react-way' is using inline styles, but this solution has some negative qualities, ex:

• It seems not to be a good solution from designer's point of view
• Is it customizable enough?
• I cannot use some of the awesome tools like autoprefixer or sass/less, which make my styles more maintainable

But there are some positive ones:

• Components become very cohesive and reusable, styles are shipped together with it.
• When inline styles are used in some library, I don't need to require any stylesheets, the style is all in my code

Other "WriteYourStylesInJS" practices have the same weaknesses, and the biggest is the reduced set of styling tools (Yes, I'm too lazy to write prefixes).

As for my actual question, how do you make your react components and css (or scss/sass or less or any other language) styles cohesive?

How do you make styles customizable and maintainable?

Is my prepossesion against inline styles reasonable?

Answer 1

I'm using inline styles and I had some problems at the beginning but you know what? I love it know...

• I don't have conflicts of style. In all of my previous non-react projects I had them... easy to fix but I don't need to worry about it now
• If I need to edit the style of a component. I just go to the component and edit it. Before... I had to check the classes of the element and then go to the css file to edit it.. and maybe I'm breaking the style of another element with the same class!
• I love style with js objects. Js everywhere! Thanks to that we don't need to use preprocessors as SCSS to have variables (just an example)

But you're right and you can have headaches with pseudo selectors like :hover... or vendor prexing, even media queries.

So.. if you need all of that, maybe you should check Radium

stay foolish!

Answer 2

In my project, i have used separated css files for styling, with same name like my components. In production it will be anyway minified and splitted in one js/css file, but you can easily copy/paste your components from project to project.