javascript - 如何设置 React 渲染组件的样式

Question

<div>
                    <h3>{this.props.product.name}</h3>
                    <h3>{this.props.product.code}</h3>

                   {this.renderColors()}
                    <article>
                      <div dangerouslySetInnerHTML={this.createMarkup(this.props.product.description)} />
                    </article>
                  </div>

这是 react 渲染对象，我想使用 CSS 设置样式。有办法吗？对于这个 html 文件，我有一个单独的 css 文件。

Answer 1

有两种方式:

1. 使用内联样式
2. 使用外部 CSS

使用内联样式

注入(inject)样式对象

const style = {
  color: "blue"
}

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

或者直接内联应用

<div style={{"color": "blue"}}></div>

使用外部 CSS

在你的 CSS 中

.blue {
  color: blue;
}

#red {
  background-color: red;
}

在你的组件中

<div className="blue"></div>
<div id="red"></div>