margin between two select box-CodePudding

I have two select box one by one like below. And my prob is I would like to give some space (margin) in between this select box.

     import Select from '@mui/material/Select'
      
       <FormControl>
        <InputLabel id="demo-simple-select-label">Roles</InputLabel>
        <Select label="Roles" name="roles">
          {roles.map(role => (
            <MenuItem key={role} value={role}>
              {role}
            </MenuItem>
                ))}
        </Select>
      </FormControl>

      <FormControl>
        <InputLabel id="demo-simple-select-label">Org</InputLabel>
        <Select label="Org" name="org">
          {orgs.map(org => (
            <MenuItem key={org} value={org}>
              {org}
            </MenuItem>
                ))}
        </Select>
      </FormControl>

I tried few ways but not working. Anyway to override the css here. I'm new react and css please give me suggestion.

CodePudding user response：

You can use nesting selector for the className MuiSelect

selectMargin: {
  "& .MuiSelect": {
    margin: "0px 5px"
  }
}

Notice that use className here:

className={classes.selectMargin}

CodePudding user response：

Wrap all form controls with Mui Stack component.

Use the spacing prop to set the exact space you need between the components.