Question

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

我提供道具：

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

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

<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

只需删除引号即可。

icon: {
    fill: white !important
  }

Answer 2

这可以通过使用classes的{{1}}部分并像这样传递它们来解决：

SelectProps

有关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的CSS类名称的列表，请参见https://material-ui.com/api/select/#css

如何在TextField中更改箭头的颜色从material-ui选择

2 个答案: