CODEWITHSUNDEEP
cssreactjsmaterial-ui
Sandler2k1
Sandler2k1

Reputation: 65

Changing border color of Material-UI Select Component

Here is my Select component from materials-UI

<FormControl variant="outlined">
<Select
    value={this.state.value}
    onChange = {this.handleChange}
    className={this.props.classes.select}
    inputProps = {{classes:{icon : this.props.classes.icon}}}
    >
    {this.state.valuelist.map((block,idx) => {
     return(<MenuItem key={Object.keys(block)[0]}
             value = {Object.keys(block)[0]}>
             {Object.keys(block)[0]}</MenuItem>)
    })}
</Select>
</FormControl>

and customized styling as recommended by another answers on stackoverflow:

const styles = theme => createStyles({
    select: {
        color : 'white',
        borderRadius : '10px',
        borderWidth : '10px',
        '&:before': {
            borderColor: 'white',
        },
        '&:after': {
            borderColor: 'white',
        } 
    },
    icon: {
        fill: '#00DBB3',
    }
})

The icon customization works perfectly. However, the border colors don't change. I have tried many ways and answers so far and nothing seems to change the borderColor of the select component. Any help on this will be appreciated !

Upvotes: 1

Views: 6756

Answers (2)

justdvl
justdvl

Reputation: 874

If you want to change the border color of MUI Select globally, for the whole theme (using MUI theme customization), you can add this to your theme definition:

  MuiSelect: {
        styleOverrides: {
          root: {
            borderRadius: '6px',
            boxShadow: SELECT_BOX_SHADOW,
            '& fieldset.MuiOutlinedInput-notchedOutline': {
              borderColor: "red",
            },
          },
        },
      },

Upvotes: 0

95faf8e76605e973
95faf8e76605e973

Reputation: 14191

That border is actually the work of your variant="outlined" FormControl. So you can target that element's border instead of the Select component

const useStyles = makeStyles({
  customOutline: {
    "& .MuiOutlinedInput-notchedOutline": {
      borderColor: "white"
    }
  }
});

function App() {
  const classes = useStyles();
  return (
      <FormControl
        variant="outlined"
        classes={{ root: classes.customOutline }}
      >...</FormControl>
  );
}

Upvotes: 4

Related Questions