如何在React中使用.css样式表？

Question

所以我有一个非常大的样式表，我试图在我的React代码中使用它。我知道你通常会在React中使用这种格式进行样式设计：

transparentBg: {
    background: 'transparent'
},

WhiteText: {
    color:'white'
},

但是，我的css样式表看起来像这样：

.transparentBg{
    background: transparent;
}

.WhiteText{
    color:white;
}

有没有将我的整个CSS样式表转换为React风格的格式？或者让我只使用原始的CSS样式表而不转换它？

Answer 1

您的CSS仍然只是CSS，而React仍然只是在页面上呈现HTML元素。

这意味着你可以将你的大型CSS文件添加到html文件中，只需将你在那里定义的CSS类/ ids等添加到React中的元素。

所以，如果你有

.transparentBg{
    background: transparent;
}

.WhiteText{
    color:white;
}

然后在你的React组件中你可以使用这些类：

var SomeComponent = function () {
  return <div className="WhiteText">
    Foo Bar Baz
  </div>;
};