React Material UI: Как придать кнопке нестандартный цвет при отключении? - PullRequest
Новая
       23

React Material UI: Как придать кнопке нестандартный цвет при отключении?

1 голос
/ 09 апреля 2019

Я создаю приложение React, используя интерфейс материалов.

Если кнопка отключена, она серая и непрозрачная.Мне бы хотелось, чтобы в моих темах основной цвет был непрозрачным.

Итак, вот что я попробовал: 

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);

Но кнопка остается серой.Как вы можете изменить стиль отключенного элемента?

Ответы [ 2 ]

2 голосов
/ 09 апреля 2019

Вы можете определить класс, который будет применяться для отключенных кнопок: 

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

И затем использовать его следующим образом: 

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

Вы можете найти в документации все классы , которые вы можете переопределить.

0 голосов
/ 10 июня 2019

Или вы можете попробовать createMuiTheme и настроить следующее свойство: 

import { createMuiTheme } from '@material-ui/core/styles'

const theme = createMuiTheme({
  palette: {
    action: {
      disabledBackground: 'set it here'
    }
  }
}
...