Question

所以我有两行在同一页面中共享相同的类名。我想将第二行的背景颜色设置为不同的颜色。所以我尝试用类来包装第二行的内容来设置它的样式。这是代码：

这是第一个网格：

J8

现在这是我要改变背景颜色的第二个网格：

<Row className="show-grid">
          <Col xs={12} md={6}>
           //Some content
          </Col>
          <Col xs={0} md={1}>
          </Col>
          <Col xs={12} md={5}>
            // some content
          </Col>
        </Row>

我尝试过使用这个css，但它没有改变任何东西：

<Row className="show-grid">
        <div className="second-grid">

          <Col xs={12} md={6}>
            // content
          </Col>
          <Col xs={0} md={1}>
          </Col>

          <Col xs={12} md={5}>
           // content
          </Col>

          </div>
        </Row>
        {/*
        **********End of section two
        */}

Answer 1

你可以使用这样的js对象：

/* stuff */
render(){
    var style = {backgroundColor:"#ffffff"};
    return(
        <Row className="show-grid" style={stye}>
        </Row>
    )
}

或者您可以尝试使用这样的CSS：

.show-grid>.second-grid {
    background-color: #ffffff;
}

如何在Reactjs中的另一个类中设置类的样式？

1 个答案: