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文件，并将它捆绑在一起或单独使用插件

反应服务器端渲染和CSS

2 个答案: