根据道具 css-modules 更改反应组件 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- 处理模块并按照我的意图捆绑？

参考文档：css-modules

Answer 1

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

创建一个导入的 "style" 对象的映射，以通过在 prop 中传递的 id 键控。只需要确保所有 "style" 对象都具有相同的 CSS 属性，例如 "alert"，当然，在指向 id 参数的对象路径上使用保护模式，这样就不会"undefined of" 次访问。

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

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

...

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

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

缺点：占用更多资源

选项 2：使用动态导入

为 "fetch" 所需的 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}

优点：size/less 资源使用较少。

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

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

根据道具 css-modules 更改反应组件 css

Change react component css based on props with css-modules

reactjs

css-modules

react-css-modules