首页 > 解决方案 > 如何更改边框颜色材质-ui选择组件

问题描述

我尝试了几种策略来更改材质 UI 的选择组件的颜色,但不幸的是它们都不起作用。我定义了useStyles函数,在这里我定义了一个带有边框值的选择类:

const useStyles = makeStyles(theme => ({
  formControl: {
    margin: theme.spacing(1),
    minWidth: 120,
    width: '100%',
    margin: 0,
    marginBottom: 15,
    borderColor: 'orange'
  },
  selectEmpty: {
    marginTop: theme.spacing(2),
  },
  select: {
    '&:before': {
      borderColor: 'red',
  }
 },
}))

这是选择组件:

const MaterialSelect = ({
  labelText, 
  menuItems, 
  setFormValue, 
  initValue,
  providerKey
}) => {
  const classes = useStyles();

和选择:

 <Select
    labelId="demo-simple-select-outlined-label"
    id="demo-simple-select-outlined"
    value={value}
    onChange={handleChange}
    labelWidth={labelWidth}
    className={classes.select}
    input={<Input classes={{
      underline: classes.underline
    }}
    name="age" id="age-helper" />}
  >
    {menuItems.map(({value, text}) => (
      <MenuItem value={value}>{text}</MenuItem>
    ))}
  </Select>

标签: reactjsmaterial-ui

解决方案


推荐阅读