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

我需要什么来控制下划线？我在组件加载时看到了我想要的下划线。悬停无法正常工作。从“选择”中选择一个项目后，我会在顶部看到我的样式，但默认样式在下面，并且我可以看到其中一些颜色。

我可以使用替代来做到这一点。这是我的主题代码：

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;

我还查看了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>

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

Answer 1

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

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

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

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