Reactjs 材质UI 4.1.2样式选择选择输入

我想改变SelectInput的样式。我使用的是基于类的组件。我是这样设置的：

const QuoteListStyle = {
  color: "#eceff1",
  borderBottom: "1px solid #90caf9",
  "&:hover:not($disabled):not($focused):not($error) $underline": {
    borderBottom: "2px solid #90caf9"
  },
  width: "196px",
  marginTop: "1rem"
};

然后，在渲染中，我使用“选择”选项创建了此部分：

<FormControl>
                    <Select
                      style={QuoteListStyle}
                      value={this.state.quoteListName}
                      onChange={this.handleChange}
                      displayEmpty={true}
                      renderValue={
                        this.state.quoteListName > 0
                          ? undefined
                          : () => <em>{this.state.quoteListName}</em>
                      }
                    >
                      <MenuItem value="" disabled>
                        <em>Select a Quote List</em>
                      </MenuItem>

                      {data.me.quoteList.map(item => {
                        return (
                          <MenuItem value={item.name} key={item.name}>
                            {item.name}
                          </MenuItem>
                        );
                      })}
                    </Select>
                  </FormControl>

我还查看了devtools并发现：

<div class="MuiSelect-root MuiSelect-select MuiSelect-selectMenu MuiInputBase-input MuiInput-input MuiInputBase-inputSelect" aria-pressed="false" tabindex="0" role="button" aria-haspopup="true"><em>Tech</em></div>

Tech

---

我不知道如何使用它来定位我想要的内容。

您不能以内联样式定位其他规则或伪类（例如，

“&:hover:not（$disabled）：not（$focused）：not（$error）$underline”

）。相反，您需要使用CSS类（例如，通过功能组件的

makeStyles

，或者

withStyles

可以与类和功能组件一起使用）

需要自定义的样式位于中。下面是一个如何自定义下划线的示例

您可以在我的相关答案中了解更多信息：

从“React”导入React；
从“react dom”导入react dom；
从“@material ui/core/FormControl”导入FormControl；
从“@material ui/core/InputLabel”导入InputLabel；
从“@material ui/core/Select”导入选择；
从“@material ui/core/MenuItem”导入菜单项；
从“@material ui/core/styles”导入{makeStyles}”；
const useStyles=makeStyles({
选择：{
“&：之前”：{
//正常的
边框底部：“1px纯色橙色”
},
“&：之后”：{
//专注
borderBottom:`3px纯绿色`
},
“&：悬停：非（.Mui禁用）：非（.Mui聚焦）：非（.Mui错误）：之前”：{
//盘旋
borderBottom:`2px纯色紫色`
}
}
});
常量应用=（）=>{
const[age，setAge]=React.useState（“”）；
const classes=useStyles（）；
返回(
年龄
设置（event.target.value）}
输入道具={{
姓名：“年龄”，
id:“简单年龄”
}}
>
十
二十
三十
);
};
const rootElement=document.getElementById（“根”）；
ReactDOM.render（
啊，好的，Ryan，这很有意义，谢谢！我会处理这个。好的，样式正在工作，但其他东西都坏了。处理它…是的，我刚刚点击了向上投票/复选标记，我专注于让它工作，今天早上没有让它运行。非常感谢！
<div class="MuiSelect-root MuiSelect-select MuiSelect-selectMenu MuiInputBase-input MuiInput-input MuiInputBase-inputSelect" aria-pressed="false" tabindex="0" role="button" aria-haspopup="true"><em>Tech</em></div>

import React from "react";
import ReactDOM from "react-dom";

import FormControl from "@material-ui/core/FormControl";
import InputLabel from "@material-ui/core/InputLabel";
import Select from "@material-ui/core/Select";
import MenuItem from "@material-ui/core/MenuItem";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles({
  select: {
    "&:before": {
      // normal
      borderBottom: "1px solid orange"
    },
    "&:after": {
      // focused
      borderBottom: `3px solid green`
    },
    "&:hover:not(.Mui-disabled):not(.Mui-focused):not(.Mui-error):before": {
      // hover
      borderBottom: `2px solid purple`
    }
  }
});

const App = () => {
  const [age, setAge] = React.useState("");

  const classes = useStyles();
  return (
    <div className="wrapper">
      <FormControl style={{ minWidth: "200px" }}>
        <InputLabel htmlFor="age-simple">Age</InputLabel>
        <Select
          className={classes.select}
          value={age}
          onChange={event => setAge(event.target.value)}
          inputProps={{
            name: "age",
            id: "age-simple"
          }}
        >
          <MenuItem value="" disabled />
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
      </FormControl>
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);