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

Posted 2023-02-19

【中文标题】将类前缀模式与 css 模块一起使用

【英文标题】：Using class prefix pattern with css module

【发布时间】：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 模块解决这个问题？

【参考方案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 模块覆盖准系统组件。