在 css 模块中使用 class 前缀模式

Question

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

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 组件级别，它无法获取附加到每个 class 名称的唯一标识符。将整个 styles 对象向下传递也不起作用。这只是一个糟糕的模式（clsPrefix）来设置通用组件的样式吗？我应该如何使用 css 模块解决这个问题？

Answer 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 模块覆盖基本组件。

在 css 模块中使用 class 前缀模式

Using class prefix pattern with css module

css

less

reactjs

css-modules