材質用戶界面切換按鈕-選中時不能更改背景顏色 [英] 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屋！