小编Sam*_*man的帖子

我正在尝试使用类似于单选按钮的 Material UI 切换按钮，为用户提供针对给定问题的 2 个选择。

它的功能基本符合预期，但是当尝试调整选择每个切换按钮时的样式时，我无法更改切换按钮的背景颜色。我在 ToggleButton 组件上使用 classes 属性，并在该属性中使用“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" …