React项目中CommonComponent样式异常覆盖问题求助

1. 类名拼接语法错误：CommonComponent中拼接className时使用了逗号（,）而非空格，导致生成的类名格式无效。例如ComponentA传入后生成的类名是commonComponentStyling, stylingComponentA，浏览器会将逗号视为类名的一部分，无法正确识别stylingComponentA这个样式类。单独渲染时可能因样式优先级或哈希巧合暂时生效，但多组件渲染时错误格式彻底暴露，默认样式（红色）覆盖了自定义样式。
2. CSS Modules使用不规范：直接传入字符串字面量作为类名，而非CSS Modules导出的哈希类名。当同时渲染多个组件时，全局范围内可能出现类名冲突（即使你以为用了Modules），进一步导致样式失效。

1. 修复类名拼接语法 #

将CommonComponent中的逗号替换为空格，保证类名正确分隔：

const CommonComponent = (props) => {
  return <span className={`commonComponentStyling ${props.providedStyling}`}>
            {props.text}
         </span>
}

2. 规范CSS Modules使用 #

每个组件的样式文件需以.module.css命名（比如ComponentA.module.css），并通过导入的样式对象获取哈希类名，避免全局冲突：

ComponentA修改后： #

// 导入CSS Modules样式
import styles from './ComponentA.module.css';

const ComponentA = () => {
   return (
      <CommonComponent providedStyling={styles.stylingComponentA} text="Foo" />
   )
}

ComponentB修改后： #

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

const ComponentB = () => {
   return (
      <CommonComponent providedStyling={styles.stylingComponentB} text="Bar" />
   )
}

3. 可选：使用classnames库避免拼接错误 #

安装classnames库后，可以更安全地处理类名拼接，避免手动字符串拼接的语法问题：

npm install classnames

import classNames from 'classnames';

const CommonComponent = (props) => {
  return <span className={classNames('commonComponentStyling', props.providedStyling)}>
            {props.text}
         </span>
}

内容的提问来源于stack exchange，提问作者EDJ