ReactJS CSS class not working

Question

I am still new to using ReactJS. I wanted to create a class for a specific form, but it does not work

Here is my code

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

and here is my code for my style.css file

 .orderform{ color: red; } 

with the simple code of this, I'm not sure why it is not working. Please tell me how to use the CSS class in ReactJS

Answer 1

Replace it

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

Since JSX uses className not class , from DOCS

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