javascript - 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

Since JSX is JavaScript, identifiers such as class and for are discouraged as XML attribute names. Instead, React DOM components expect DOM property names like className and htmlFor, respectively.