css 模块反应不适用于呈现多次的组件

问题描述

我正在使用 css 模块进行反应。 但它似乎不适用于在同一页面（路由）中呈现两次或更多次的组件。

例如： 组件 A 和 B 都独立呈现组件 C。 但组件 C 样式不起作用

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>
    )
}
}

在这个例子中，C.module.css 对 C 组件没有影响...

谢谢。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）