CSS Class Selector Styles Not Being Applied in React Project

CSS class selector styles not being applied in React Project

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.

react css class not applying

Change this:

import classes from './Layout.css';

To

import './Layout.css';

Then change this:

<main className={classes.Content}>

to

<main className={"Content"}>

---

If you're bent on importing your css file like so:

import classes from './Layout.css';

Change your CSS file name to ./layout.module.css, then import it this way:

import classes from './layout.module.css';

And only then can you access css class names using:

classes.Content

More on file naming conventions here: https://create-react-app.dev/docs/adding-a-css-modules-stylesheet/

React class styling from css stylesheet not working

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>

Some CSS loaded into React app are not applied

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>

Why is my css not applying styling to React component?

The issue was caused by a syntax mistake of having the values of the properties in "quotes".

Movies.css:

.MoviesContainer {
  display: "flex";
  justify-content: "space-evenly";
  flex-wrap: "wrap";
}

Should be:

Movies.css:

.MoviesContainer {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
}

React/Webpack applying styles to tags but not classes/ids

I think the reason of this issue is you have enable the css modules in webpack but not referring the css correctly.

So if you don't need the css module, try to remove options:{ modules:true} from your webpack config. Then the css could be applied to the class name you set in ReactJS.

Or if you do need the css module, keep the Webpack config. But modify your ReactJS to something like this:

import React, { Component } from 'react';
import styles from 'path\to\file.css';

class foo extend Component {
  render() {
    return (<div classname={styles.oakResults}> This is the test component</div>)
  }
}

Hope it helps.

---

Related Topics