如何更改材质ui选择菜单下拉颜色？答案

【问题标题】：How to change material ui select menu's drop down colors?如何更改材质ui选择菜单下拉颜色？
【发布时间】：2021-09-17 09:41:11
【问题描述】：

我只想更改下拉菜单背景颜色的颜色，但我没有尝试任何工作，我感到困惑。

我无话可说，stackoverflow 想让我添加更多文本，但我只能说我一直在谷歌上搜索各种解决方案，但到目前为止没有任何效果。

const BootstrapInput = withStyles((theme: Theme) =>
    createStyles({
        root: {
            'label + &': {
                marginTop: theme.spacing(3),
            },
        },
        selectMenu: {
            color: 'rgba(1,1,255,1)',
            backgroundColor: "#rgba(255,0,0,1)",
            "& ul": {
                backgroundColor: "#rgba(255,0,0,1)",
            },
            "& li": {
                backgroundColor: "#rgba(255,0,0,1)",
                fontSize: 12,
            },
        },
        input: {
            borderRadius: 0,
            position: 'inherit',
            backgroundColor: 'rgba(0,0,0,0)',
            color: 'rgba(255,255,255,1)',
            border: '1px solid rgba(255,255,255,0.2)',
            fontSize: 15,
            padding: '10px 26px 10px 12px',
            transition: theme.transitions.create(['border-color', 'box-shadow']),
            // Use the system font instead of the default Roboto font.
            fontFamily: [
                '-apple-system',
                'BlinkMacSystemFont',
                '"Segoe UI"',
                'Roboto',
                '"Helvetica Neue"',
                'Arial',
                'sans-serif',
                '"Apple Color Emoji"',
                '"Segoe UI Emoji"',
                '"Segoe UI Symbol"',
            ].join(','),
            '&:focus': {
                borderRadius: 4,
                borderColor: 'rgba(255,255,255,0.2)',
                boxShadow: '0 0 0 0.2rem rgba(0,190,255,0.6)',
                backgroundColor: 'rgba(0,0,0,0)',
            },
        },
    }),
)(InputBase);

<Select
                            native
                            value={currentClass}
                            onChange={updateClassChosenFunction}
                            input={<BootstrapInput />}
                        >
                            <option aria-label="None" value="" />
                            <option value={1}>One</option>
                            <option value={2}>Twu</option>
                            <option value={3}>Three</option>
                            
                        </Select>

【问题讨论】：

InputBase API 没有selectMenu 规则名称。我认为向root 添加背景颜色应该可以。另请注意，"#rgba(255,0,0,1)" 语法无效。
您也可以尝试检查该元素并查看应用了哪些 CSS 样式，如果不是这样，您可以import a stylesheet

标签： reactjs material-ui react-material

【解决方案1】：

我们应该做两件事来应用所需的样式。第一个是输入的样式，第二个是下拉菜单的样式（如果我们也想改变它的样式）。因此，我们可以通过 makeStyles 创建合适的样式，如下所示：

const useStyles = makeStyles((theme) => ({
  //other part of the code//
  paper: {
    background: "red",
    color: "white"
  },
  input: {
    color: "red",
    backgroundColor: "rgba(255, 0, 0, 0.4)",
    "&:focus": {
      borderRadius: 4,
      borderColor: "rgba(255,255,255,0.2)",
      boxShadow: "0 0 0 0.2rem rgba(0,190,255,0.6)",
      background: "rgba(0,0,0,0)"
    }
  }
}));

然后我们需要将它们应用到Select 组件。 According to the doc、MenuProps 和 inputProps 负责这些更改：

    <Select
      MenuProps={{
        classes: {
          paper: classes.paper
        }
      }}
      inputProps={{
        classes: {
          root: classes.input
        }
      }}
     // other attributes//
    >

CodeSandbox

【讨论】：