React class styling from css stylesheet not working

Question

In my React App, I am trying to load styles for html elements from a CSS stylesheet by assigning styles to classes.

I can get styling for elements, such as h2, p, td, working

Problem:

I cannot get styling for classes to work.

--- UPDATE: The below code appears to be working, and I am not sure what caused it to fail before. I'd delete this question if I could. Thank you for those that helped ---

App.js

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  constructor(props) {
    super();
    }
  }

  render() {
    return (
      <div className="App">
        <div className="hide_me">
          <h2>This text should not be visible because it has className "hide_me"</h2>
        </div>
      </div>
    );
  }
}

export default App;

App.css

h2 {
  color: red;
}

.hide_me {
  display: none;
}

Current Behavior

I see text in red that should be hidden ie

Expected behaviour

No text!

---

Is there a solution that allows me to use CSS stylesheets without installing a new module?

Answer 1

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>

Answer 2

I ran into the same issue as you and fixed by doing a forced refresh. New styles aren't applied on a regular refresh since the browser is using the cached version of that page. A cache issue might explain how this magically went away for you.

You can do a force refresh and clear the page click by shift-clicking the refresh button in Chrome or Firefox.

Refer to this article for more

Answer 3

检查开发工具中的 h2 以查看它是否真的有 hide_me 类。

Answer 4

I faced a same problem. My project had ASP.NET as a backend. When I changed modules to false in my webpack.config.js file, all styles of classes showed up. It should be

options: {
    modules: false
}

Answer 5

Try reading this official documentation. This will give you a solid understanding of react -> https://reactjs.org/docs/getting-started.html .