Without a working example, it's hard to say, but here's a hide/show toggle example (click Run code snippet). Try copying/pasting this example into your project and seeing if it works. If it doesn't, then there's something not set up properly with your project, where stylesheets aren't being properly imported.

class App extends React.Component {
  constructor(props) { 
    super(props);
    
    this.state = { clicks: 0, hidden: false };
    
    this.handleIncreaseClicks = this.handleIncreaseClicks.bind(this);
    this.handleButtonDisplay = this.handleButtonDisplay.bind(this);
  } 
   
  handleIncreaseClicks() {
    this.setState(state => ({ clicks: state.clicks + 1 }));
  }  
   
  handleButtonDisplay() {
    this.setState(state => ({ hidden: !state.hidden }));
  }

  render() {   
    return(
      <React.Fragment>
        <div className={`container ${this.state.hidden ? "hide-me" : ""}`}>
          <p className="label">Clicks:</p>
          <button 
            className="clicks" 
            onClick={this.handleIncreaseClicks}
          >
            {this.state.clicks}
          </button>
          <br />
        </div>
        <button 
          className="hide-show-button" 
          onClick={this.handleButtonDisplay}
        >
          {this.state.hidden ? "Show" : "Hide"} Clicks
        </button>
      </React.Fragment>
    )
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

.container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.label {
  font-weight: 700;
  margin-right: 10px;
}

.hide-show-button {
  cursor: pointer;
  margin: 0 5px;
  text-align: center;
  font-size: 14px;
  width: 100px;
  padding: 4px;
  border-radius: 3px;
  border: 1px solid #333333;
  transition: all 0.2s ease-in-out;
}

.hide-show-button {
  background-color: #f56342;
  color: white;
}

.hide-show-button:hover {
  background-color: #be391c;
}

.clicks {
  cursor: pointer;
  font-size: 14px;
  width: 100px;
  padding: 4px;
  border-radius: 3px;
  border: 1px solid #333333;
  text-align: center;
  transition: all 0.2s ease-in-out;
}

.clicks:hover {
  background-color: #c1c1c1;
}

.clicks:focus, .hide-show-button:focus {
  outline: 0;
}

.hide-me {
  display: none
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>


<div id='root'>
</div>

In a react project created with create-react-app or npx create-react-app, I also had the same issue.

I had imported index.css file in my App Component but my styles were not being applied properly to my React Components.

I even tried directly adding index.css file in my html file in the public folder and using link tag to link to my index.css file (which resides within src folder).

<link rel="stylesheet" href="./../src/index.css">

That also didn't work.

Finally, I read an article about 7 ways to apply CSS into React. One best way was to install node-sass into our project and use index.scss ( import './index.scss') into App Component instead of index.css.

And Hurray!!! My CSS worked fine, All the Media Queries started to work fine.

Below is the code snippet you can try.

import React from "react";
import ReactDom from "react-dom";
import './index.scss';


// --- Data to work with ---
const books = [
  {
    id: 1,
    name: 'The Rudest Book Ever',
    author: 'Shwetabh Gangwar',
    img: 'https://m.media-amazon.com/images/I/81Rift0ymZL._AC_UY218_.jpg'
  },
  {
    id: 2,
    name: 'The Rudest Book Ever',
    author: 'Shwetabh Gangwar',
    img: 'https://m.media-amazon.com/images/I/81Rift0ymZL._AC_UY218_.jpg'
  },
  {
    id: 3,
    name: 'The Rudest Book Ever',
    author: 'Shwetabh Gangwar',
    img: 'https://m.media-amazon.com/images/I/81Rift0ymZL._AC_UY218_.jpg'
  },
  {
    id: 4,
    name: 'The Rudest Book Ever',
    author: 'Shwetabh Gangwar',
    img: 'https://m.media-amazon.com/images/I/81Rift0ymZL._AC_UY218_.jpg'
  },
];


const Book = ({ book }) => {
  return (
    <div className={"book"}>

      <img src={book.img} alt="book image" />

      <h3>{book.name}</h3>
      <p>{book.author}</p>
    </div>
  )
};

const Books = () => {
  return (
    <main className={"books"}>
      {
        books.map(book => {
          return (<Book book={book} key={book.id} />)
        })
      }
    </main>
  )
};


// Work a bit fast | one step at a time
const App = () => {
  return (
    <main>
      <h2>Books</h2>
      <Books />
    </main>
  )
}

ReactDom.render(<App />, document.getElementById("root"));

/* --- Mobile First Design --- */
.books{
  text-align: center;
};

.book{
  border: 1px solid #ccc;
  text-align: center;
  width: 200px;
  padding: 1rem;
  background: #001a6e; 
  color: #fff;
  margin:auto;
};

h2{
  text-align: center;
}

/* --- Adding Media Queries --- */
@media only screen and (min-width: 900px){
  .books,.persons{
    display:grid;
    grid-template-columns: 1fr 1fr;
  }
}

To install node-sass, simple do npm install node-sass --save Then rename all your .css files with .scss and your project with work properly.

The package.json should have the node-sass dependency added as shown below:

 "dependencies": {
    "node-sass": "^4.14.1",
    "react": "^16.8.3",
    "react-dom": "^16.8.3",
    "react-scripts": "2.1.5"
  },

Hope this will help many developers :)

According to the React Static Boilerplate website, they use CSS Modules - this would explain why the body tag is being respected but the class selector is not.

https://github.com/css-modules/css-modules

try importing the stylesheet like so:

import styles from './MyComponent.css';

The using it in your component like so:

<div className={styles.card}>something!</div>

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.

Your webpack configuration may be changing the class name depending on its settings. (CSS Modules enabled, though your comment about stylesheet intact implies it's not).

Since you are importing the './style.css' file, try referencing the class name like: style.foo. Ex:

<div className={ style.foo }>foo div</div>

This article: http://javascriptplayground.com/blog/2016/07/css-modules-webpack-react/ describes the pattern of importing and referencing the class name pretty well.

in package.json replace vite build with vite build --base=./ , this worked for me, you are free to provide any base path here according to your need

I had this same problem and solved it by renaming my css file to:

myName.module.css

and also importing like this:

import styles from './myName.module.css'

There is no need to follow the steps of updating the webpack files any more.

the class attribute is invalid in React, this is because it is a reserved keyword, use className instead

in your blocks/Nav.js

import React from 'react';


export default class Nav extends React.Component {
    render() {
        return (

        <div id="top-nav" className="navbar navbar-inverse navbar-static-top">
            <div className="container">
                <div className="navbar-header">
                    <button type="button" className="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span className="icon-toggle"></span>
                    </button>
                    <a className="navbar-brand" href="#">Dashboard</a>
                </div>
                <div className="navbar-collapse collapse">
                    <ul className="nav navbar-nav navbar-right">

                        <li className="dropdown">
                            <a className="dropdown-toggle" role="button" data-toggle="dropdown" href="#"><i className="glyphicon glyphicon-user"></i> Admin <span className="caret"></span></a>
                            <ul id="g-account-menu" className="dropdown-menu" role="menu">
                                <li><a href="#">My Profile</a></li>
                            </ul>
                        </li>
                        <li><a href="#"><i className="glyphicon glyphicon-lock"></i> Logout</a></li>
                    </ul>
                </div>
            </div>
        </div>

        )
    }
}

Hope this helps!