材质UI切换按钮-选择后无法更改背景颜色
材质UI切换按钮-选择后无法更改背景颜色
提问于 2020-09-20 07:09:45
我尝试使用Material UI切换按钮，有点像一个单选按钮，让用户对给定的问题有两个选择。
它的功能与预期基本一致，但当尝试调整每个切换按钮被选中时的样式时，我无法更改toggle button的背景颜色。我在ToggleButton组件上使用了类属性，并在该属性中使用了"selected“规则。某些css属性(例如padding和boxShadow)可以工作，但其他属性(包括backgroundColor)不能工作。我的目标是让切换按钮在被选中时具有蓝色背景，但到目前为止，我还不能让它在被选中时以不同于较暗的灰色背景的方式显示。
我使用React，以及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>
);
}回答 3
Stack Overflow用户
发布于 2021-06-17 16:28:14
在您的全局css或scss文件中尝试：
button.MuiToggleButton-root.Mui-selected {
background-color: #1f792f !important;
border-color: #000 !important;
}
Stack Overflow用户
发布于 2021-07-30 20:31:59
创建新类并不要忘记使用！重要的是覆盖"Mui-selected“类的backgroundColor
classes= useStyle({
newClass { backgroundColor:'red!important'},
})
<ToggleButton
classes={{
selected:clasess.newClass,
.
.
.
}}
value=''
/>Stack Overflow用户
发布于 2021-08-24 17:09:06
const useStyles = makeStyles(theme => ({
ToggleButton : {
'&.MuiToggleButton-root.Mui-selected': {
backgroundColor: theme.palette.common.white,
}
}
}));页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63974150
复制相关文章
相似问题
腾讯云开发者
