Material-UI 4.1.2 Styling Выберите 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"
};

Тогда в рендере у меня есть этот раздел с Select:

<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 можно использовать как с компонентами классов, так и с компонентами функций).

Стили, которые необходимо настроить, находятся в пределах Ввод . Ниже приведен пример того, как настроить подчеркивание.

Подробнее об этом можно прочитать в моих ответах:

• Как настроить стиль подчеркивания Material-UI без использования темы?
• Как изменить цветовую нижнюю границу синей линии на зеленую зеленую линию в поле выбора с помощью реагирования js?

import React, { Component } from "react";
import ReactDOM from "react-dom";

import Input from "@material-ui/core/Input";
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 { withStyles } from "@material-ui/core/styles";

const styles = {
  formControl: {
    minWidth: 200
  },
  focused: {},
  disabled: {},
  error: {},
  underlineInput: {
    "&:before": {
      // normal
      borderBottom: "1px solid #90caf9"
    },
    "&:after": {
      // focused
      borderBottom: `3px solid #90caf9`
    },
    "&:hover:not($disabled):not($focused):not($error):before": {
      // hover
      borderBottom: `2px solid #90caf9`
    }
  }
};

class App extends Component {
  state = {
    age: ""
  };

  handleChange = name => event => {
    this.setState({ [name]: event.target.value });
  };

  render() {
    const { classes } = this.props;
    return (
      <div className="wrapper">
        <FormControl className={classes.formControl}>
          <InputLabel htmlFor="age-simple">Age</InputLabel>
          <Select
            value={this.state.age}
            onChange={this.handleChange("age")}
            input={
              <Input
                classes={{
                  focused: classes.focused,
                  disabled: classes.disabled,
                  error: classes.error,
                  underline: classes.underlineInput
                }}
              />
            }
            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 StyledApp = withStyles(styles)(App);

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