ReactJS CSS Lớp không hoạt động

Question

Tôi vẫn còn mới sử dụng ReactJS. Tôi muốn tạo ra một lớp cho một hình thức cụ thể nhưng nó không làm việc

Đây là mã của tôi

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); 

và đây là mã của tôi cho file style.css của tôi

.orderform{ 
    color: red; 
} 

với một mã đơn giản này tôi không chắc tại sao nó không hoạt động. Xin đừng hướng dẫn cho tôi về cách sử dụng lớp CSS trong ReactJS

Answer 1

Thay thế nó với

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

Như JSX sử dụng className không class, từ DOCS

Kể từ JSX là JavaScript, định danh như class và for là không khuyến khích làm tên thuộc tính XML. Thay vào đó, các thành phần React DOM mong đợi các tên thuộc tính DOM như className và htmlFor, tương ứng.