如何设置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>

这是反应渲染对象，我想使用CSS来设置它。有办法吗？这个html文件有一个单独的css文件。

Answer 1

你可以用两种方式做到：

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

使用内联样式

注入样式对象

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>