材质用户界面切换按钮-选中时不能更改背景颜色 [英] Material UI Toggle Button - can't change background color when selected
本文介绍了材质用户界面切换按钮-选中时不能更改背景颜色的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试使用材料UI切换按钮,有点像单选按钮,为用户提供对给定问题的两个选择。
它基本上可以正常工作,但当尝试调整每个切换按钮被选中时的样式时,我无法更改切换按钮的背景颜色。我在ToggleButton组件上使用了CLASS属性,并在该属性中使用了";SELECTED&QOOT;规则。 某些css属性(如pding&;boxShadow)可以正常工作,但其他属性(包括背景颜色)则不起作用。我的目标是使切换按钮在被选中时具有蓝色背景,但到目前为止,我无法使它在被选中时以不同于较深的灰色背景的方式显示。我正在使用Reaction,以及Formik和Formik-Material-UI。以下是我的代码:
const useStyles = makeStyles((theme) => ({
toggleButton: {
backgroundColor: 'blue',
border: [10, 'solid', 'black'],
padding: 10,
boxShadow: [
[0, 0, 0, 1, 'blue'],
],
}
}));
export function ScheduleAndServices(props) {
const classes = useStyles(props);
return (
<Field
component={ToggleButtonGroup}
name="requestType"
type="checkbox"
exclusive
>
<ToggleButton
value="ps"
aria-label="Temporary/Occasional"
selected={values.requestType === "ps" ? true : false}
classes={{selected: classes.toggleButton}}
>Temporary/Occasional
</ToggleButton>
<ToggleButton
value="reg"
aria-label="Regular"
selected={values.requestType === "reg" ? true : false}
>Regular
</ToggleButton>
</Field>
);
}
推荐答案
const useStyles = makeStyles(theme => ({
ToggleButton : {
'&.MuiToggleButton-root.Mui-selected': {
backgroundColor: theme.palette.common.white,
}
}
}));
这篇关于材质用户界面切换按钮-选中时不能更改背景颜色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文