ReactJS CSS类无法正常工作 [英] ReactJS CSS Class not working

问题描述

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

I am still new in using ReactJS. I wanted to create a class for a specific form but it is not working

这是我的代码

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文件的代码

and here is my code for my style.css file

.orderform{
    color: red;
}

有一个简单的代码我不知道为什么它不起作用。请指导我如何在ReactJS中使用类CSS

with a simple code of this I am not sure why it is not working. Please do guide me on how to use class CSS in ReactJS

推荐答案

将其替换为

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

因为JSX使用 className 而不是类，来自 DOCS

As JSX uses className not class, from the DOCS

由于JSX是JavaScript，因此 class 和等标识符是
不鼓励作为XML属性名称。相反，React DOM组件
期望DOM属性名称，如 className 和 htmlFor ，分别。

这篇关于ReactJS CSS类无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！