Question

这是我从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>

和自定义样式，如关于stackoverflow的另一个答案所推荐：

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

图标自定义效果很好。但是，边框颜色不会改变。到目前为止，我已经尝试了许多方法和答案，并且似乎没有任何更改可以更改选择组件的borderColor。任何帮助，将不胜感激！

Answer 1

该边界实际上是您的variant="outlined" FormControl的工作。因此，您可以定位该元素的边框而不是Select组件

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

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

更改Material-UI选择组件的边框颜色

1 个答案: