I'm struggling to override the default padding of the Select ponent to match the size of my other text fields. I understand that I need to modify nested ponents but have been unable to find a working solution.

<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'
/>

Layout issue

I'm struggling to override the default padding of the Select ponent to match the size of my other text fields. I understand that I need to modify nested ponents but have been unable to find a working solution.

<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'
/>

Layout issue

• javascript
• css
• reactjs
• material-ui

• 1 Can you provide a CodeSandbox with your code please? – Jose Felix Commented Dec 26, 2019 at 23:02

2 Answers 2

According to the doc, there are several ways that we can override the material UI ponent styles.

If we want to override the padding of the Select ponents differently and occasionaly, or if this process would not be repeated in the entire project, we can simply use Overriding styles with classes approach. In this way, first we need to create our desired padding for Select ponent by makeStyles as below:

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

and then assign it to the classes prop of the ponent, by modifying the root element:

    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

    )

working sandbox example for this method

If we want to override the padding of the Select ponent for the whole project, Global theme variation would prevent repetition. In this way, we should create a theme by createMuiTheme, as below, and apply our desired changes there:

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

then pass this theme as a prop to the ThemeProvider ponent which surround the whole project:

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

working example in sandbox

I found an alternative way in the docs, that's easier to use for me: instead of using Select ponent, I use TextField with "select" props

cf: https://material-ui./ponents/text-fields/#select

<TextField
  id="standard-select-currency"
  select
  label="Select"
  value={currency}
  onChange={handleChange}
  helperText="Please select your currency"
>
  {currencies.map((option) => (
    <MenuItem key={option.value} value={option.value}>
      {option.label}
    </MenuItem>
  ))}
</TextField>

Which allows you to access TextField props such as margin="none", margin="dense"