Material-UI 4.1.2样式选择SelectInput [英] Material-UI 4.1.2 Styling Select SelectInput

问题描述

我想更改SelectInput的样式.我正在使用基于类的组件.我是这样设置的:

I want to alter the style of the SelectInput. I'm using a class based component. I set it up this way:

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

然后在渲染器中，我在选择"部分中有此部分:

Then in the render I have this section with the 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组件.我想更改下划线的颜色和大小.我在源代码中看过这里:

I'm using the basic Select component that only has an underline. I want to change the color and size of the underline. I looked here in the source:

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

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

What do I look for to control the underline? I am seeing the underline that I want when the component loads. The hover is not working. After an item from the Select is chosen, I see my style on top but the default style is below and I can see some of that color.

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

I would be ok using overrides for this. Here's my theme code:

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，发现了这一点:

I also looked in the devtools and found this:

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

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

I'm not sure how to use that to target what I want.

推荐答案

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

You can't target other rules or pseudo-classes (e.g. "&:hover:not($disabled):not($focused):not($error) $underline") in inline styles. Instead you need to use CSS classes (e.g. via makeStyles for function components or withStyles can be used with both class and function components).

您需要自定义的样式在

The styles you need to customize are within Input. Below is an example of how to customize the underline.

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

You can read more about this in my related answers:

• 如何在不使用主题的情况下自定义Material-UI的下划线样式?

• 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 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 { makeStyles } from "@material-ui/core/styles";

const useInputStyles = makeStyles({
  underline: {
    "&: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 inputClasses = useInputStyles();
  return (
    <div className="wrapper">
      <FormControl style={{ minWidth: "200px" }}>
        <InputLabel htmlFor="age-simple">Age</InputLabel>
        <Select
          value={age}
          onChange={event => setAge(event.target.value)}
          input={<Input classes={inputClasses} />}
          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);

这篇关于Material-UI 4.1.2样式选择SelectInput的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！