使用 css-modules 根据 props 更改 react 组件 css

Question

我有以下几点：

className={`${this.props.match.params.id}.alert`}

/* desired output = `className="style_alert__3TLGs"` */
/* instead output = `className="style.alert"` */

如果我硬编码类名（例如{style.alert}），我会得到所需的输出。似乎结果是一个字符串，并且没有由 css-module 包处理（可能是因为它是在之后渲染的？），我该如何更改它以便 className 由 css-module 处理并按我的意图捆绑？

参考文档：css-modules

Answer 1

选项 1： 导入您知道会使用的所有样式模块

创建一个导入的“样式”对象的映射，以通过 prop 中传递的ids 进行键控。只需要确保所有“样式”对象都具有所有相同的 CSS 属性，例如“警报”，当然，还要在 id 参数的对象路径上使用保护模式，这样就不会出现“未定义的”访问。

import styles1 from "....";
import styles2 from "....";
...

const stylesMap = {
  style1Id: styles1,
  style2Id: styles2,
  ...
};

...

className={stylesMap[this.props.match.params.id].alert}

优点：前端加载您需要的所有 CSS 模块，并且可能更容易推理和调试

缺点：使用更多资源

选项 2：使用动态导入

创建一个异步函数来“获取”所需的 CSS 模块，并使用组件生命周期函数或效果挂钩来更新样式对象引用。

const loadStyle = async (...params) => {
  try {
    const styleObject = await import(...path and module name from params);
    // setState or useState setter to set style object
  } catch {
    // set a fallback style object
  }
}
...

componentDidMount() {
  // check props.match.params.id
  // gather up other CSS module path details
  // trigger dynamic CSS module load
  loadStyle(... CSS module path detials);
}
**OR**
useEffect(() => {
  // check props.match.params.id
  // gather up other CSS module path details
  // trigger dynamic CSS module load
  loadStyle(... CSS module path detials);
}, [props.match.params.id, ...any other dependencies]);

...

className={stylesMap[<this.>state.styleObject].alert}

优点：体积更小/资源使用更少。

缺点：由于未提前获取资源，因此渲染时可能会有更多延迟。

注意：还取决于您的应用使用情况、需求和要求。例如，如果它是一个捆绑应用程序（想想 cordova/phonegap、electron 等），那么包含您需要的所有资源会更明智。