Styles don't apply using react-css-modules

Question

Everything seems fine, there are no errors, but elements on the page are still not styled.

webpack.config.js

{
    test: /\.css$/,
    loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]')
},


plugins: [
  new ExtractTextPlugin('app.css', {
    allChunks: true
  }),
],

Layout.js

import React, { Component } from 'react';
import InteractiveMap from './InteractiveMap';
import Header from './header';
import Navigation from './navigation';
import CSSModules from 'react-css-modules';
import styles from './Layout.css';

class Layout extends Component {
  render() {
    return (
      <div>
        <div className={styles.mapContainer}>
         <InteractiveMap /> 
       </div>
       <div>
         <Header className={styles.header}>
            <Navigation menuItems={menuItems}/>
         </Header>
        </div>
      </div>
    );
  }
}

export default CSSModules(Layout, styles);

Layout.css

//testing

.mapContainer: {
    padding: 0;
    background-color: black;
    height: 100%;
    color: yellow;
}

.header {
    color: yellow;
    background-color: blue;
}

compiled app.css

.Layout__mapContainer___3yH5h: {
  padding: 0;
  background-color: black;
  height: 100%;
  color: yellow;
}

.Layout__header___2kJ4F {
    color: yellow;
    background-color: blue;
}

As you can see on the picture, classes are generated, applied to elements, but on the page nothing is showing. image

Have you got any solution for this? I am facing the same issue. — EdG
– EdG, Commented Jun 5, 2017 at 12:31

Ori Drori · Accepted Answer · 2016-09-16 06:18:12Z

1

In react-css-modules you use styleName instead of className:

<div styleName="container">

This should work:

class Layout extends Component {
  render() {
    return (
      <div>
        <div styleName="mapContainer">
         <InteractiveMap /> 
       </div>
       <div>
         <Header styleName="header">
            <Navigation menuItems={menuItems}/>
         </Header>
        </div>
      </div>
    );
  }
}

answered Sep 16, 2016 at 6:18

Ori Drori

196k32 gold badges243 silver badges233 bronze badges

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

7 Comments

Natalia Cr Over a year ago

Yes, I've tried it already, but unfortunately it doesn't work

Ori Drori Over a year ago

What do you get when you do console.log(styles)?

Natalia Cr Over a year ago

I get an object: Object {mapContainer: Layout__mapContainer___3yH5h", header: "Layout__header___2kJ4F"}

Ori Drori Over a year ago

And does it work without the extractTextPlugin? If it does work without the plugin, it means that you haven't included a reference to app.css in your html file.

Natalia Cr Over a year ago

Added the compiled css file. Here's reference in my html: <link rel="stylesheet" href="app.css">. Also it's not working without the extractTextPlugin and in console it shows error: GET http://localhost:8080/app.css. Could the problem be the wrong path to css file? I tried changing it different ways, but can't figure it out.

|

Jean-Pierre · Accepted Answer · 2018-07-22 22:17:45Z

0

I was having the same issue.. my problem was that I did not include the generated css stylesheet in my .html file.

Without the stylesheet

<html>
<head>
</head>

<body>
    <div id = "hero"> </div>
    <script type="text/javascript" src="bundle.js"></script>
</body>

With the stylesheet (fix)

<html>
<head>
     <link rel='stylesheet' href='app.css'>
</head>

<body>
    <div id = "hero"> </div>
    <script type="text/javascript" src="bundle.js"></script>
</body>

answered Jul 22, 2018 at 22:17

Jean-Pierre

1

Comments

Paul Alexeev · Accepted Answer · 2021-01-11 09:41:16Z

0

You need added prefix "module", example:

import styles from './Layout.module.css';

answered Jan 11, 2021 at 9:41

Paul Alexeev

3962 silver badges12 bronze badges

Collectives™ on Stack Overflow

Styles don't apply using react-css-modules

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related