CODEWITHSUNDEEP
javascriptcssreactjsmaterial-ui
akremer
akremer

Reputation: 125

Not able to change padding of material UI Select component

I'm struggling to override the default padding of the Select component to match the size of my other text fields. I understand that I need to modify nested components 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

Upvotes: 11

Views: 19864

Answers (2)

JCLimpide
JCLimpide

Reputation: 56

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

cf: https://material-ui.com/components/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"

Upvotes: 2

alisasani
alisasani

Reputation: 2968

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

If we want to override the padding of the Select components 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 component 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 component, 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 component 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 component which surround the whole project:

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

working example in sandbox

Upvotes: 7

Related Questions