Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

doesn't work properly with react-css-modules

See original GitHub issue


Only inner styleName compiles to ‘class’, but inners not. You can see that div-2 value has stylename attribute, but should class as div-1. 1

Component code:

import React, { Component } from 'react';
import CSSModules from 'react-css-modules';
import styles from './styles.css';

export default class App extends Component {
  render() {
    return (
      <div styleName="div-1">
        <div styleName="div-2">
          Big square should be red; <br /> Small square should be black.


.div-1 {
  width: 500px;
  height: 500px;
  background: red;

.div-2 {
  width: 200px;
  height: 200px;
  background: black;
  color: white;

How it looks: 1

How it should: 1

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:10 (4 by maintainers)

github_iconTop GitHub Comments

pavelivanovcommented, Feb 7, 2018

so sad, hoped it to be fixed… =/

mqklincommented, Jan 10, 2017

It’s very verbose to write styles every time, css-modules allows to write it only once, that’s why I use it. Will be very great for me if this will be fixed, I want to try preact in production. Thanks.

Read more comments on GitHub >

github_iconTop Results From Across the Web

CSS modules not working for react version 16.6.0
Not working with React 17.0.1. The only way to make it work is Changing to UpperCase all the css classes in the css...
Read more >
Using CSS Modules in React - OpenReplay Blog
Since I started utilizing React Typescript with CSS Modules, I have run into this problem. To begin using CSS Modules in a React...
Read more >
Solving the React Error: Not Picking Up CSS Style | Pluralsight
Here, the CSS file is saved outside the src folder, so the compiler failed to import it. To make this code work, you...
Read more >
A complete guide to CSS Modules in React (Part-1) - codeburst
Polluting the global space with CSS specific to a module or component brings with it a lot of overheads in terms of maintenance....
Read more >
Using CSS modules in React - Bootcamp
If you are relatively new to CSS, you may or may not have encountered the significant problem that occurs as an application's style...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found