Question

我是材料ui的新手，我的目标是在我们单击某个项目时更改颜色。它显示蓝色和黑色bprder，我想以正常方式显示，例如没有边框黑色的灰色。有人可以在选择项目时帮助我改变颜色吗？

这是代码：

<FormControl className={classes.formControl}>
        <NativeSelect
          name="age"
          className={classes.selectEmpty}
          inputProps={{ "aria-label": "age" }}
        >
          <option value={10}>one</option>
          <option value={20}>two</option>
        </NativeSelect>
      </FormControl>

Here is the code

Answer 1

我认为，就您而言，解决此问题的最佳方法是不使用NativeSelect。 MaterialUI拥有自己的Select Component。该API非常棒，您可以覆盖所需的所有CSS类，并更改组件的UI。 Here是整个组件API，其中包含您可以使用的所有选项。

<FormControl className={classes.formControl}>
    <Select
      name="age"
      defaultValue={20}
      className={classes.selectEmpty}
      inputProps={{ "aria-label": "age" }}
      MenuProps={{ style: { top: "35px" } }}
    >
      <MenuItem value={10}>one</MenuItem>
      <MenuItem value={20}>two</MenuItem>
    </Select>
  </FormControl>

如何使用材质ui更改所选项目的颜色

1 个答案: