根据具有CSS模块的道具更改反应成分CSS

Question

我有以下内容：

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

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

如果我对className进行硬编码（例如{style.alert}），则会得到所需的输出。似乎结果是一个字符串，并且没有由css-module包处理（也许是因为它是在之后渲染的？），如何更改此值，以便className由css-module处理并按我的意愿捆绑在一起？] >

参考文档：css-modules

我有以下内容：className = {`$ {this.props.match.params.id} .alert`} / *期望的输出=`className =“ style_alert__3TLGs”`* / / *而不是output =`className =“ style.alert“`* /如果我对...

Answer 1

创建导入的“样式”对象的地图，以通过prop中传递的id进行键控。只需要确保所有“样式”对象都具有所有相同的CSS属性，例如“ alert”，当然，请在id参数的对象路径上使用保护模式，以便没有“ undefined of”访问。