Пользовательский интерфейс React Material: как придать кнопке собственный цвет, когда она отключена?
Я создаю приложение React с использованием пользовательского интерфейса Material.
Если кнопка отключена, она серая и непрозрачная. Я бы хотел, чтобы в моих темах был основной цвет и непрозрачность.
Итак, вот что я пробовал:
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);
Но кнопка остается серой. Как изменить стиль отключенного элемента?
Ответы 5
Вы можете определить класс, который будет применяться для отключенных кнопок:
const styles = theme => ({
disabledButton: {
backgroundColor: theme.palette.primary || 'red'
}
});
А затем используйте его следующим образом:
<Button
variant = "contained"
color = "secondary"
disabled
classes = {{ disabled: classes.disabledButton }}
>
Disabled
</Button>
Вы можете найти в документировать все классы, что вы можете переопределить.
это не работает... нужно использовать метод jss-nested
Этот ответ датирован 2019 годом. Возможно, он больше не действует в текущей версии MUI.
Или вы можете попробовать createMuiTheme и настроить следующее свойство:
import { createMuiTheme } from '@material-ui/core/styles'
const theme = createMuiTheme({
palette: {
action: {
disabledBackground: 'set color of background here',
disabled: 'set color of text here'
}
}
}
Это верно! Я бы также добавил `палитра: {действие: {disabled: YourCustomColor} }`
Ответ Непса правильный, но я добавлю больше деталей.
Прежде всего, вы должны импортировать createMuiTheme и ThemeProvider:
import { createMuiTheme } from '@material-ui/core/styles'
import { ThemeProvider } from '@material-ui/styles';
Создать тему:
const theme = createMuiTheme({
palette: {
action: {
disabledBackground: 'set color of background here',
disabled: 'set color of text here'
}
}
});
И оберните свою кнопку:
<ThemeProvider theme = {theme}>
<Button color = "primary">Primary</Button>
</ThemeProvider>
Как используется disabledBackground?
Вы можете добавить стиль к отключенному классу кнопок, например:
.Mui-disabled { background-color: blue; }
Вы также можете увидеть, какие другие классы можно использовать для стилизации кнопки на https://material-ui.com/api/button/.
Столкнулся с той же проблемой и сумел решить ее, изменив :disabled на &:disabled.
const styles = theme => ({
button: {
"&:disabled": {
backgroundColor: theme.palette.primary || 'red'
}
}
});
Мне нравится этот подход, но, к сожалению, я считаю, что на самом деле он не работает (хотя, если я ошибаюсь, я хотел бы увидеть песочницу). Чтобы заставить его работать, вам нужно следовать (неинтуитивному) методу здесь.