Material-UI 4.1.2 样式选择 SelectInput

Question

我想改变 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>

我正在使用只有下划线的基本 Select 组件。我想更改下划线的颜色和大小。我在源代码中查看了这里：

https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Select/SelectInput.js

我要寻找什么来控制下划线？ 当组件加载时，我看到了我想要的下划线。悬停不起作用。从 Select 中选择一个项目后，我会在顶部看到我的样式，但默认样式在下面，我可以看到其中的一些颜色。

我可以为此使用覆盖。这是我的主题代码：

const theme = createMuiTheme({
  palette: {
    primary: {
      main: "#90caf9",
      contrastText: "#f5f5f5"
    },
    secondary: {
      main: "#19857b"
    },
    error: {
      main: "#f44336"
    },
    background: {
      default: "#102027",
      paper: "#37474f"
    },
    text: {
      primary: "#eceff1",
      secondary: "#90caf9"
    },
    button: {
      borderColor: "#90caf9"
    }
  },
  overrides: {
    MuiOutlinedInput: {
      root: {
        "& $notchedOutline": {
          borderColor: "#90caf9"
        },
        "&:hover:not($disabled):not($focused):not($error) $notchedOutline": {
          borderColor: "#90caf9",
          borderWidth: 2
        },
        "&$focused $notchedOutline": {
          borderColor: "#90caf9"
        }
      },
      notchedOutline: {}
    },
    MuiSelect: {
      icon: {
        fill: "#90caf9"
      }
    }
  }
});

export default theme;

我还查看了开发工具，发现了这个：

<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>

我不确定如何使用它来定位我想要的东西。

Answer 1

您不能在内联样式中定位其他规则或伪类（例如"&:hover:not($disabled):not($focused):not($error) $underline"）。相反，您需要使用 CSS 类（例如，通过 makeStyles 用于函数组件或 withStyles 可以与类和函数组件一起使用）。

您需要自定义的样式在Input 内。下面是如何自定义下划线的示例。

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

• How do I custom style the underline of Material-UI without using theme?
• How to change color border bottom blue line to green green line in select field using react js?

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);