score:1

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"

score:4

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


Related Query

More Query from same tag