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

Posted 2023-02-22

【中文标题】如何更改材质ui选择菜单下拉颜色？

【英文标题】：How to change material ui select menu's drop down colors?

【发布时间】：2021-09-17 09:41:11

【问题描述】：

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

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

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

【参考方案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