React服务器端渲染和CSS

Question

从服务器端渲染React组件时，服务CSS的最佳方法是什么？ 目前，我在父组件的头部定义了一个样式标签。 看起来如下

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

如您所见，当我开始应用更多的CSS属性时，这可能会令人讨厌。 做这个的最好方式是什么？

Answer 1

这一点与服务器端完全无关，但是您可以使用普通的javascript对象（带有camelCase属性）来应用样式：

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

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

然后，您在一个单独的文件中定义样式，并将其要求进入主视图。 不需要webpack。

Answer 2

您是否考虑过使用webpack捆绑文件？ 那么您只需要在js文件中使用css文件，然后将其捆绑在一起或使用插件分别打包即可