javascript - 如何在 ReactJs 中管理样式

Question

我正在努力学习 React。到目前为止，我在 java 脚本中看到了很多样式变化。据我所知，样式应该只由 css 文件管理。但我不确定这条规则是否也适用于 React。 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>