css - 如何更改 TextField 中箭头的颜色 Select from material-ui

Question

我在 Material-ui TextField Select 中更改箭头图标的颜色时遇到问题。

我给 Prop :

icon: {
    fill: "white !important",
  },

但是颜色没有改变。我已经尝试了可能在互联网上找到的所有内容。带图标的输入 Prop 不起作用。

<TextField
          id="outlined-select-currency"
          select
          label={label}
          name={this.props.name}
          className={classNames(this.props.classes.textField)}
          onChange={(e) => this.props.handleChange(e)}
          value={this.props.value}
          SelectProps={{
            MenuProps: {
              className: this.props.classes.menu,
              icon: "white !important"
            }
          }}
          InputLabelProps={{
            classes: {
              root: this.props.overrideCssLabel,
              focused: this.props.overrideCssFocusLabel,
              icon: {
                color: "white !important"
              }
            },
          }}
          InputProps={{
            classes: {
              root: this.props.overrideCssInputRoot,
              focused: this.props.overrideCssInputFocus,
              notchedOutline: this.props.overrideCssInputNotchedOutline,
              icon: this.props.icon
            },
            style: {
              color: this.props.color
            },
          }}
          margin="normal"
          variant="outlined"
        >
          {selectList.map(option => (
            <MenuItem key={option.value} value={option.value}>
              {option.label}
            </MenuItem>
          ))}
        </TextField>

Answer 1

这可以通过使用 SelectProps 的 classes 部分并像这样传递它们来解决:

import React, { FunctionComponent } from 'react';
import TextField from '@material-ui/core/TextField';
import { makeStyles } from '@material-ui/core/styles';

type Props = {
  someProps: any
};

const useStyles = makeStyles({
  icon: {
    color: 'white',
  },
});

const CustomTextInput: FunctionComponent<Props> = ({
  ...someProps
}) => {
  const classes = useStyles();
  return (
    <TextField
      {...someProps}
      select
      SelectProps={{
        classes: { icon: classes.icon },
      }}
    />
  );
};

export default CustomTextInput;

参见 https://material-ui.com/api/select/ SelectProps 和 https://material-ui.com/api/select/#css 的列表classes

的 CSS 类名列表