无法更改材质 UI Select 组件的填充

Question

我正在努力覆盖选择组件的默认填充以匹配其他文本字段的大小。我知道我需要修改嵌套组件，但一直无法找到有效的解决方案。

<div className='wifi-chooser-column'>
<TextField
    style={{margin: '6px'}} 
    label='SSID' 
    variant='outlined'
    size='small'
/>
<Select
    style={{margin: '6px', padding: '0px'}}
    variant='outlined'
    value={this.state.security}
    onChange={(event) => this.setState({security: event.target.value})}
    classes={{
        select: {
            padding: '10.5px 14px'
        }
    }}
>
    <MenuItem label='security' value='Unsecured'>Unsecured</MenuItem>
    <MenuItem value='WEP'>WEP</MenuItem>
    <MenuItem value='WPA2'>WPA2</MenuItem>
</Select>
<TextField 
    style={{margin: '6px'}} 
    label='Username' 
    variant='outlined'
    size='small'
/>
<TextField 
    style={{margin: '6px'}} 
    label='Password' 
    variant='outlined'
    size='small'
/>

布局问题

Answer 1

根据文档，我们可以通过多种方式覆盖材质 UI 组件样式。

如果我们想偶尔以不同的方式覆盖组件的填充Select，或者如果这个过程不会在整个项目中重复，我们可以简单地使用 类覆盖样式方法。这样，首先我们需要为 Select 组件创建所需的填充，如下makeStyles所示：

const useStyles = makeStyles((theme) => ({
  rootFirstSelect: {
    padding: "4px 0px"
  },
  rootSecondSelect: {
    padding: "10px 80px"
  }
}));

然后classes通过修改根元素将其分配给组件的 prop：

    const classes = useStyles();
    //Other part of the code
    return (
    //Other part of the code

    <Select
      classes={{ root: classes.rootFirstSelect }}
    //other props
    >

    //Other part of the code

    )

此方法的工作沙箱示例

Select如果我们想覆盖整个项目的组件填充，全局主题变化将防止重复。这样，我们应该创建一个主题createMuiTheme，如下所示，并在那里应用我们想要的更改：

const theme = createMuiTheme({
  overrides: {
    MuiSelect: {
      select: {
        padding: "4px 0px 10px 130px !important"
      }
    }
  }
});

然后将此主题作为道具传递给ThemeProvider围绕整个项目的组件：

  <ThemeProvider theme={theme}>
    <Demo />
  </ThemeProvider>

沙箱中的工作示例