ReactJS TypeScript中动态设置div元素className失效问题求助

• 核心问题：你用模板字符串写法会把结果转成字符串字面量，而不是实际访问styles对象的属性。比如cname='MyClass'时，最终得到的是字符串"styles.MyClass"，而不是styles.MyClass对应的真实样式类名，自然无法生效。

• 正确写法：使用对象的方括号属性访问语法，直接从styles中取值：

  const cname = 'MyClass';
  <div className={styles[cname]}></div>
  

• TypeScript类型提示优化（可选）：如果想避免拼写错误，让TypeScript识别合法的类名，可以给cname指定类型为keyof typeof styles：

  const cname: keyof typeof styles = 'MyClass';
  <div className={styles[cname]}></div>
  

  这样如果输入了styles里不存在的类名，TS会直接报错提示。

• 补充说明：硬编码styles.myClass有效，是因为这是直接访问对象的已知属性，打包工具（比如webpack+css-loader）会正确解析对应的哈希类名；而字符串拼接的方式相当于传递了一个无效的类名字符串，所以样式不会生效。

内容的提问来源于stack exchange，提问作者Graeme Burton