CODEWITHSUNDEEP
javascriptreactjs
RRP
RRP

Reputation: 2853

React Server Side Rendering and CSS

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?

Upvotes: 0

Views: 217

Answers (2)

aarosil
aarosil

Reputation: 4898

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.

Upvotes: 2

Frederick Mfinanga
Frederick Mfinanga

Reputation: 1155

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

Upvotes: 0

Related Questions