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作为XML属性名都望而却步.相反,React DOM组件分别期望DOM属性名称className和htmlFor.