向React组件传递className：Material-UI Button样式不生效问题

看起来你踩了一个很常见的对象属性访问的坑！你的问题出在把属性路径当成字符串传给了className，而不是实际去访问classes对象里的对应类名，所以Material-UI根本找不到你想要应用的样式。

核心问题解释 #

你之前写的'classes.button' + index只是拼接出了一个字符串（比如当index=0时，字符串是'classes.button0'），但React和Material-UI并不会把这个字符串解析成对classes对象的属性引用——它只会把这个字符串直接当成类名加到DOM元素上，而你的样式模块里显然没有这个名叫classes.button0的类，所以样式自然不生效。

修正后的代码示例 #

你需要用对象属性访问语法来获取classes里的对应类名，这里有两种常用写法：

写法1：模板字符串 + 方括号访问

attributes.map((attribute, index) => {
  // 用方括号访问classes对象的动态属性
  const buttonClass = classes[`button${index}`];
  console.log(buttonClass); // 现在输出的是实际生成的类名，比如"makeStyles-button0-123"
  return (
    <Button 
      className={buttonClass} 
      onClick={this.handleClick.bind(this, attribute)}
      key={index} // 务必添加key属性，避免React列表渲染警告
    >
      {attribute}
    </Button>
  )
})

写法2：提前定义数组式的classes（如果样式逻辑允许）

如果你的按钮样式是按顺序排列的，也可以把样式定义成数组，直接通过索引取：

// 定义样式时
const useStyles = makeStyles({
  buttonStyles: [
    { backgroundColor: 'red' },
    { backgroundColor: 'blue' },
    { backgroundColor: 'green' }
  ]
});

// 渲染时
const classes = useStyles();
attributes.map((attribute, index) => {
  const buttonClass = classes.buttonStyles[index];
  return (
    <Button 
      className={buttonClass} 
      onClick={this.handleClick.bind(this, attribute)}
      key={index}
    >
      {attribute}
    </Button>
  )
})

额外注意事项 #

1. 确保你的classes对象里确实存在button0、button1这类属性（对应你定义的样式），如果是用makeStyles或styled生成的，检查样式定义是否正确。
2. 列表渲染时一定要添加key属性，这是React的强制要求，能提升渲染性能并避免警告。

内容的提问来源于stack exchange，提问作者Joseph Tsui