ReactJS CSS Class not working

Question

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

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

adeneo · Accepted Answer · 2016-02-23 02:43:30Z

18

Replace it with

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

As JSX uses className not class, from the 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.

answered Feb 23, 2016 at 2:43

adeneo

319k29 gold badges410 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

dczii Over a year ago

not sure why it is still not working. I have also added import classNames from 'classnames/bind';

adeneo Over a year ago

So inspecting the HTML, everything works as expected, it's just the missing class that is the issue

Collectives™ on Stack Overflow

ReactJS CSS Class not working

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related