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之内。下面是一个如何自定义下划线的示例。

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

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

Material-UI 4.1.2样式选择SelectInput

1 个答案: