将类前缀模式与 css 模块一起使用答案

【问题标题】：Using class prefix pattern with css module将类前缀模式与 css 模块一起使用
【发布时间】：2021-12-29 19:14:40
【问题描述】：

我有一个遵循这种模式的通用组件：

const Example = ({
  clsPrefix = '',
}: props) => {
  return (
    <>
      <div className={`${clsPrefix}__div1`}>div 1</div>
      <div className={`${clsPrefix}__div2`}>div 2</div>
    </>
  )
}

项目正在逐步过渡到使用 css 模块。虽然这种模式适用于全局 css 名称，但我无法让它与 css 模块一起使用。即：

// css module
.item {
  ...
  &__div1 {
    ...
  }
  &__div2 {
    ...
  }
}

// .tsx using css module
<Example clsPrefix={styles.item}/>

在Example 组件级别，它无法获得附加到每个类名的唯一标识符。将整个 styles 对象向下传递也不起作用。这只是一个不好的模式（clsPrefix）来设置通用组件的样式吗？我应该如何使用 css 模块解决这个问题？

【问题讨论】：

标签： css reactjs less css-modules

【解决方案1】：

我最终将整个 css 模块对象传递给它的子组件，对此我感到很满意：

type StyleProps = {
  div1: string
  div2: string
}

type Props = {
  extraStyles?: Partial<StyleProps>
}

const Example = ({ extraStyles }: Props) => {

  return (
    <>
      <div
        className={classNames({
          ...
          [extraStyles?.div1]: extraStyles?.div1,
        })}
      >
        div 1
      </div>
      <div
        className={classNames({
          ...
          [extraStyles?.div2]: extraStyles?.div2,
        })}
      >
        div 2
      </div>
    <>
  )
}

这与完成这项工作的模式并不完全相同 - 允许使用 css 模块覆盖准系统组件。

【讨论】：