React服务器端渲染和CSS

Question

What is the best way to serve css when rendering React components from server side? Currently i have a style tag defined in the head of the parent component. It looks like the following

            <style>{"\
            .test-cases{\
            border:2px solid black;\
            margin-left:30px\
            background-color:blue;\
            \
            }\
                .describe{\
                  margin-left:90px;\
                  background-color:yellow;\
                }\
              "}</style>

As you can see this can get nasty, as i start applying more css properties. What is the best way to do this?

Answer 1

This is not related to server-side at all, but you can use plain javascript object (with camelCase properties) to apply the style:

style = {marginLeft: '30px',  backgroundColor: 'blue'}
...

<div style={style}>
...
</div>

Then you define your style in a separate file and require it into the main view. Without needing webpack.

Answer 2

Have you considered using webpack to bundle your files? then you could simply require the css file on your js file, and have it bundled together or separately using plugins