问题描述
我正在尝试使用材料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,
}
}
}));