Question

我正在使用material UI react的选择字段

当我从字段中选择任何项目时，我会遇到两个问题：

边框底线变为蓝色，背景颜色变为灰色。我需要将“边框”底线更改为绿色，将背景色更改为白色。

这是我的代码 https://codesandbox.io/s/zqok7r3x63

<FormControl className={classes.formControl}>
          <InputLabel
            required
            htmlFor="age-native-simple"
            FormLabelClasses={{
              asterisk: classes.labelAsterisk,
              root: classes.labelRoot,
              focused: classes.focusedLabel
            }}
          >
            Role
          </InputLabel>
          <Select
            className=""
            native
            classes={{}}
            value={this.state.age}
            onChange={this.handleChange("age")}
            inputProps={{
              name: "age",
              id: "age-native-simple",
              classes: {
                root: classes.inputRoot,
                focused: classes.inputFocused,
                underline: classes.underlineInput
              }
            }}
          >
            <option value="" disabled />
            <option value={10}>Ten</option>
            <option value={20}>Twenty</option>
            <option value={30}>Thirty</option>
          </Select>
        </FormControl>

Answer 1

首先，“选择”材质UI组件仅按文档中所述在其class属性上接受根，选择，填充，概述，selectMenu，禁用和图标，因此没有“聚焦”和“下划线”。

第二，您可以按照自己的方式编写自定义CSS并将其注入到适当的类中，例如，使选择的背景白色成为焦点：

更改课程

classes: {
            root: classes.inputRoot,
            select: classes.inputFocused
          }

更改CSS

  inputFocused: {
    "&:focus": {
    backgroundColor: "white"}
  },

希望有帮助

Answer 2

使用本机Select时，有两个主要元素：Input和本机<select>。 Input是更改下划线所需要的，但是对于本机选择，将inputProps传递给本机select而不是Input。在这种情况下，您可以通过Input属性来自定义input，然后为它提供underline类。您要在聚焦时更改的背景颜色是select的背景颜色，因此可以直接在classes属性中传递。

下面是Select的样式和代码以及沙盒的更新版本。在我的示例中，我为不同状态的下划线使用了三种不同的颜色，以便您可以轻松看到效果，但是您可以将所有/任何颜色更改为您喜欢的绿色阴影。

const styles = {
  focused: {},
  disabled: {},
  error: {},
  select: {
    "&:focus": {
      backgroundColor: "white"
    }
  },
  underlineInput: {
    "&:before": {
      // normal
      borderBottom: "1px solid #00ff00"
    },
    "&:after": {
      // focused
      borderBottom: `2px solid #ff0000`
    },
    "&:hover:not($disabled):not($focused):not($error):before": {
      // hover
      borderBottom: `2px solid #0000ff`
    }
  }
};

          <Select
            native
            classes={{ select: classes.select }}
            value={this.state.age}
            onChange={this.handleChange("age")}
            input={
              <Input
                classes={{
                  root: classes.inputRoot,
                  focused: classes.focused,
                  disabled: classes.disabled,
                  error: classes.error,
                  underline: classes.underlineInput
                }}
              />
            }
            inputProps={{
              name: "age",
              id: "age-native-simple"
            }}
          >
            <option value="" disabled />
            <option value={10}>Ten</option>
            <option value={20}>Twenty</option>
            <option value={30}>Thirty</option>
          </Select>

如何使用React JS在选择字段中将颜色边框的底部蓝色线更改为绿色绿色线？

2 个答案: