材质 UI 切换按钮 - 选择时无法更改背景颜色

Posted 2023-02-22

【中文标题】材质 UI 切换按钮 - 选择时无法更改背景颜色

【英文标题】：Material UI Toggle Button - can't change background color when selected

【发布时间】：2021-01-06 11:29:33

【问题描述】：

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

它的功能基本符合预期，但是当尝试调整选择每个切换按钮时的样式时，我无法更改切换按钮的背景颜色。我在 ToggleButton 组件上使用 classes 道具，并在该道具中使用“选定”规则。 某些 css 属性（例如 padding 和 boxShadow）有效，但其他属性（包括 backgroundColor）无效。我的目标是让 Toggle 按钮在选中时具有蓝色背景，但到目前为止，我无法让它在选中时与深灰色背景不同。

我正在使用 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>
);

【问题讨论】：

如果某些样式有效而某些无效，则可能是 CSS 特异性的问题。 Material UI 中的内置 CSS 比您的选择器更具体。但是，为了确认，如果我们有一个可以使用的代码框会更好。

【参考方案1】：

在您的全局 css 或 scss 文件中尝试：

button.MuiToggleButton-root.Mui-selected 
  background-color: #1f792f !important;
  border-color: #000 !important;

【讨论】：

请提供解释以帮助任何可能遇到这种情况的人理解它

【参考方案2】：

创建新类，不要忘记使用 !important 覆盖“Mui-selected”类的背景颜色

classes= useStyle(
newClass  backgroundColor:'red!important',
)

<ToggleButton 
classes= 
selected:clasess.newClass,
.
.
.

value=''
/>

【参考方案3】：

  const useStyles = makeStyles(theme => (
    ToggleButton : 
        '&.MuiToggleButton-root.Mui-selected': 
            backgroundColor: theme.palette.common.white,
        
    
));