React Server Side Rendering and 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?

aarosil · Accepted Answer · 2016-03-31 01:24:30Z

2

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.

answered Mar 31, 2016 at 1:24

aarosil

4,8983 gold badges30 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

RRP Over a year ago

thanks!, just went with defining a separate css file

Frederick Mfinanga · Accepted Answer · 2016-03-31 01:18:57Z

0

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

answered Mar 31, 2016 at 1:18

Frederick Mfinanga

1,1552 gold badges12 silver badges29 bronze badges

2 Comments

RRP Over a year ago

is there an alternative to webpack, for the moment?

GGG Over a year ago

Use a <link> to reference to an external css file?

Collectives™ on Stack Overflow

React Server Side Rendering and CSS

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related