如何设置 Material UI Select 弹出窗口的样式？

Question

我有以下反应 select 组件正常工作，除了我想要 select 选项的不同背景颜色和字体。

Select代码

<TextField
  fullWidth
  select
  size="small"
  name="trigger"
  value={thisTrigger}
  onChange={(selectedOption) => {
    doSetTrigger(selectedOption);
  }}
  InputProps={{disableUnderline: true}}
>
  {triggers.map((trigger, index) => (
    <MenuItem
      key={index}
      value={index}
    >
      {trigger.ENDPOINT}
    </MenuItem>
  ))}
</TextField>

而且我已经尝试了所有我能想到的风格 - 这是我最近的尝试

root: {
    'background': 'linear-gradient(#F0F0FA, #F0F0FA)',
    'height': '100vh',
    'width': '100%',
    'position': 'relative',
    '& .MuiList-padding': {
      'borderRadius': '10px',
      'background': 'white',
      'color': '#001C32',
      'fontWeight': 400,
      'fontFamily': '"Manrope", "Roboto", "Arial", "sans-serif"',
      'lineHeight': '1.5',
      'fontSize': '1em',
    },
  },

当它不起作用时让我感到惊讶，因为我可以在浏览器开发工具中为 .MuiList-padding 添加背景颜色，而且它起作用了！

我一定是漏掉了什么；欢迎提出任何建议！

Answer 1

我想你想要这个

MenuProps={{ classes: { list: classes.menu } }}

Codesandbox：https://codesandbox.io/s/peaceful-kare-c815b?file=/src/App.js

Answer 2

@Nisharg 的 MenuProps 建议对我来说相当很遗憾，很遗憾。不过，哦，太接近了。它给了我足够的时间来找到解决方案。以下是对我有用的：

                  <TextField
                    fullWidth
                    select
                    size="small"
                    name="trigger"
                    value={thisTrigger}
                    onChange={(selectedOption) => {
                      doSetTrigger(selectedOption);
                    }}
                    InputProps={{disableUnderline: true}}
                    SelectProps={{
                      MenuProps: {
                        classes: {paper: classes.cmdSelect},
                      },
                    }}
                  >
                    {triggers.map((trigger, index) => (
                      <MenuItem
                        key={index}
                        value={index}
                      >
                        {trigger.ENDPOINT}
                      </MenuItem>
                    ))}
                  </TextField>

其中 classes.cmdSelect 看起来像这样：

  cmdSelect: {
    '& ul': {
      backgroundColor: '#FFFFFF',
    },
  },

轰！

如何设置 Material UI Select 弹出窗口的样式？

How to Style Material UI Select Popup?

javascript

drop-down-menu

reactjs

material-ui