ReactJS CSS类不工作

Question

在使用ReactJS方面，我还是个新手。我想为特定的表单创建一个类，但它不起作用

以下是我的代码

import React, { Component, PropTypes } from 'react';
import s from './style.scss';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import { Grid, Row, Col } from 'react-bem-grid';
class OrderDetails extends Component {
  render() {
      return (
          <div>
            <Row>
              <form class="orderform">
                <h3>Product Details: </h3>
                  <Row>
                    <Col xs={5}>
                      Product: <br />
                      Category: <br />
                      Sub Category: <br />
                      Price: <br />
                      Color: <br />
                      Breakdown: 
                    </Col>
                    <Col xs={4}>
                      test
                    </Col>
                  </Row>
                <h3>Print Details</h3>
                  <Row>
                    <Col xs={5}>
                      Print Method: <br />
                      Position:   <br />
                      Length:   <br />
                      Width:  <br />
                      Colors
                    </Col>
                  </Row>
              </form>
            </Row>
          </div>
     );
  }
}
export default withStyles(OrderDetails, s);

下面是我的style.css文件的代码

.orderform{
    color: red;
}

通过一个简单的代码，我不确定为什么它不能工作。请指导我如何在ReactJS中使用类CSS

Answer 1

将其替换为

return (
      <div>
        <Row>
          <form className="orderform">

由于JSX使用的是className而不是class，因此来自DOCS的

由于JSX为JavaScript，因此不鼓励将class和for之类的标识符用作

属性名。相反，React DOM组件需要分别像className和htmlFor这样的DOM属性名称。