Блог

Вот мой компонент выбора из материалов-пользовательский интерфейс

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

и настраиваемый стиль в соответствии с рекомендациями других ответов на stackoverflow:

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

Настройка значка работает отлично. Однако цвета границ не меняются. До сих пор я пробовал много способов и ответов, и, похоже, ничто не меняет цвет границы выбранного компонента. Любая помощь в этом будет оценена!

Эта граница на самом деле является работой вашего variant="outlined" FormControl . Таким образом, вы можете настроить таргетинг на границу этого элемента вместо Select компонента

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

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

Если вы хотите изменить цвет границы MUI Select глобально для всей темы (используя настройку темы MUI), вы можете добавить это в определение своей темы:

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