Question

我只想更改下拉菜单背景颜色的颜色，但我尝试的任何方法都不起作用，我感到很困惑。

我无话可说，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>

Answer 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

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

1 个答案: