如何在ReactJs中管理样式

Question

我正在努力学习反应。到目前为止，我在java脚本中看到了很多样式更改。据我所知，该样式应该由css文件管理。但我不确定这条规则是否也适用于React。什么是反应的最佳做法。例如，下面的代码是一个干净的代码，还是改变了React组件中的样式气味并需要重构？如果是这样，它是如何重构的？

“const Color = ({ title, color}) =>
    <section className="color">
        <h1>{title}</h1>
        <div className="color" 
             style={{ backgroundColor: color }}>
        </div>
    </section>”

Answer 1

我更喜欢连接外部.css文件 - 它更干净。如果需要在.js中保留样式，我会以这种方式组织代码：

const styles = {
color: 'red',
fontSize: '2rem',
backgroundColor: 'forestgreen'
}

我会像这里一样应用我需要的样式：

<div style={{color: styles.color, fontSize: styles.fontSize}}></div>

或者，如果我需要应用所有样式：

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

Answer 2

这完全取决于我们的要求和偏好。内联样式仅涉及它们被编写的组件。您可以根据组件构建css，使其变得可重用。您可以在变量和单独的asssets目录中将css声明到组件中。

它更多的是代码可读性和可重用性。 Webpack将你的所有css / scss写入一个文件并注入你的index.html。您应该查看JSS，以便您可以编译您的CSS，然后将其作为道具注入您的组件。无论如何，你可以利用很多资源。

Answer 3

您还可以使用样式组件https://www.styled-components.com/