Javascript 使用makeStyles更改按钮文本的颜色

之前，我对我的按钮进行了如下设计：

      style={{
        background: '#6c74cc',
        borderRadius: 3,
        border: 0,
        color: 'white',
        height: 48,
        padding: '0 30px',
      }}>

这很有效。文本颜色为白色，而背景颜色为按钮的颜色。但是，我现在使用的是：

className={classes.button}>
export const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    button: {
      background: '#6c74cc',
        borderRadius: 3,
        border: 0,
        color: 'white',
        height: 48,
        padding: '0 30px',
        //fontStyle: 'red',
        
    },
  }),
);

---

虽然背景颜色正确，但文本颜色不是白色（当按钮被禁用时）。当按钮未被禁用时，则其状态良好。否则，就不是了。如何修复此问题？

您已将颜色值设置为“红色”，请尝试将其更改为白色。它应该可以工作。

查看codesandbox示例会有所帮助，但我怀疑material按钮为禁用的元素设置了颜色属性，这就是文本颜色错误的原因

材质ui使用哪个来创建样式表-因此，如果您为其禁用状态创建一个伪选择器，例如

export const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    button: {
        background: '#6c74cc',
        borderRadius: 3,
        border: 0,
        height: 48,
        padding: '0 30px',
        '&:disabled': {
            color: 'white',
        }    
    },
  }),
);

您会发现应用了正确的颜色。

---

如果不使用最小的代码沙箱进行回复，我很乐意看一看：）

不，这只是为了测试。在ans之前，我已经在qs中将其更改为白色。这不是问题所在