reactjs - css modules react doesn't work on a component that render more than once

Question

I'm using react with css modules . But it seems that it's not workign on a component that get renders twice or more in the same page(route) .

for example: Component A and B both renders component C independently . but component C styling does not work

A.js

import C from './C/C'
import React, { Component } from 'react'
import classes from './A.module.css' // A's css file

export class A extends Component {


render() {
    return (
        <div className={classes.A}> // work perfecly
            <div className={classes.C}> // works perfectly
            <h2>bla bla</h2>
                <C
                    //props
                >
                </C>
            </div>
        </div>
    )
}
}

B.js

import C from './C/C'
import React, { Component } from 'react'
import classes from './B.module.css' // A's css file

export class B extends Component {


render() {
    return (
        <div className={classes.B}> // work perfecly
            <div className={classes.C}> // works perfectly
            <h2>bla bla</h2>
                <C
                    //props
                >
                </C>
            </div>
        </div>
    )
}
}

C.js

import React, { Component } from 'react'
import classes from './C.module.css' // C's css file

export class C extends Component {


render() {
    return (
        <div className={classes.C}> // no effect...
            <div className={classes.someClass}> // no effect...
              this is C component
            </div>
        </div>
    )
}
}

In this example C.module.css does gets no effect on the C component...

thanks.

question from:https://stackoverflow.com/questions/65861653/css-modules-react-doesnt-work-on-a-component-that-render-more-than-once

Answer 1

Waitting for answers