React Material UI:如何在禁用时为按钮提供自定义颜色? [英] React Material UI: How to give a button a custom color when disabled?

问题描述

我正在使用Material UI构建React App.

如果该按钮被禁用，则为灰色且不透明.我希望它以主题为原色和不透明.

这就是我尝试过的:

  import从反应"中反应；从"prop-types"导入PropTypes；从"@ material-ui/core/styles"导入{withStyles}；从"@ material-ui/core/Button"导入Button；const styles = theme =>({按钮: {:disabled":{backgroundColor:theme.palette.primary ||'红色的'}}});函数ContainedButtons(props){const {classes} = props;返回 (< div><按钮variant ="contained"color ="secondary"残障人士className = {classes.button}>残障人士</按钮></div>);}ContainedButtons.propTypes = {类:PropTypes.object.isRequired};导出默认的withStyles(styles)(ContainedButtons); 

但是按钮保持灰色.如何更改禁用元素的样式?

解决方案

您可以定义要应用于禁用按钮的类:

  const styles = theme =>({DisabledButton:{backgroundColor:theme.palette.primary ||'红色的'}}); 

然后，像这样使用它:

 <按钮variant ="contained"color ="secondary"残障人士classes = {{已禁用:classes.disabledButton}}>残障人士</按钮> 

您可以在文档中找到可以覆盖的所有类./p>

I'm building a React App using Material UI.

If the button is disabled, it is grey and opaque. I'd like it to be in my themes primary color and opaque.

So here is what I tried:

import React from "react";
import PropTypes from "prop-types";
import { withStyles } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";

const styles = theme => ({
  button: {
    ":disabled": {
      backgroundColor: theme.palette.primary || 'red'
    }
  }
});

function ContainedButtons(props) {
  const { classes } = props;
  return (
    <div>
      <Button
        variant="contained"
        color="secondary"
        disabled
        className={classes.button}
      >
        Disabled
      </Button>
    </div>
  );
}

ContainedButtons.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(styles)(ContainedButtons);

But the button stays grey. How can you change the style of a disabled element?

解决方案

You can define a class to be applied for disabled buttons:

const styles = theme => ({
  disabledButton: {
    backgroundColor: theme.palette.primary || 'red'
  }
});

And then, use it like this:

<Button
  variant="contained"
  color="secondary"
  disabled
  classes={{ disabled: classes.disabledButton }}
>
  Disabled
</Button>

You can find in the documentation all the classes that you can override.

这篇关于React Material UI:如何在禁用时为按钮提供自定义颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！