时间戳

首页 > 解决方案 > 使用 makeStyles 更改按钮文本的颜色

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',
        
    },
  }),
);

虽然背景颜色正确，但文本颜色不是白色（当按钮被禁用时）。当按钮未被禁用时，它很好。否则，它不是。我怎样才能解决这个问题？

标签： javascriptcssreactjstypescriptmaterial-ui

解决方案

查看代码框示例会很有帮助，但我怀疑材质按钮为禁用元素设置了颜色属性，这就是文本颜色错误的原因。

Material-ui 使用makestyles，它使用jss创建样式表 - 因此，如果您为其禁用状态创建伪选择器，例如

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

您应该发现应用了正确的颜色。如果没有用最小的代码沙箱回复，我很乐意看看:)

推荐阅读