reactjs - 如何更改向下箭头文本字段材料ui的颜色

Question

我有一个选择文本文件，当我悬停或选择文本文件时，我希望向下箭头颜色也改变，这是我的文本文件和样式

• 风格

   const styles = theme => ({
       icon: {
           fill: themeStyle.textColor,
       },
      underline: {
           '&:before': {
               borderBottomColor: themeStyle.textFieldUnderLineColor,
           },
           '&:after': {
               borderBottomColor: themeStyle.tabIndicatorProps,
               color: themeStyle.tabIndicatorProps,
           },
           '&:hover:before': {
              borderBottomColor: [themeStyle.underLineSearchTextFieldColor, '!important'],
           },
           color: themeStyle.titleTextColor,
     },
     notchedOutline: {},
     outlinedInput: {
          '&$focused $notchedOutline': {
             border: `2px solid ${themeStyle.tabIndicatorProps}`
           },
           backgroundColor: themeStyle.bkgBodyColor
     },
     focused: {},
     notchedOutline: {},
  })
  

• 文本域

  <TextField
         select
         SelectProps={{
                native: true,
         }}
         className = {classes.textField}
         InputLabelProps={{
                classes: {
                       root: classes.cssLabel,
                       focused: classes.cssFocused,
                }
         }}
         InputProps={{
                classes:{
                       underline: classes.underline,
                       icon: classes.icon
                }
         }}
         type= 'select'
  >
         {Tools.GetEnumSelectOptionsAddAll(APP_Enums.DoModeEnum)}
  </TextField>
  

• 现在我想在悬停或选择时更改它的颜色或...

标签： reactjsmaterial-ui

Answer 1

您应该使用该SelectProps属性来提供所需的样式。

这是一个工作示例 - https://codesandbox.io/s/material-demo-select-6lewu

参考下文，

const useStyles = makeStyles((theme) => ({
  root: {
    "& .MuiTextField-root": {
      margin: theme.spacing(1),
      width: "25ch"
    }
  },
  icon: {
    color: "red"
  }
}));

export default function MultilineTextFields() {
  const classes = useStyles();
  const [currency, setCurrency] = React.useState("EUR");
  const [isMouseOver, setMouseOver] = React.useState(false);

  const handleChange = (event) => {
    setCurrency(event.target.value);
  };

  const handleMouseEnter = () => {
    setMouseOver(true);
  };

  const handleMouseLeave = () => {
    setMouseOver(false);
  };

  return (
    <form className={classes.root} noValidate autoComplete="off">
      <div>
        <TextField
          id="standard-select-currency-native"
          select
          label="Native select"
          value={currency}
          onChange={handleChange}
          onMouseEnter={handleMouseEnter}
          onMouseLeave={handleMouseLeave}
          SelectProps={{
            native: true,
            classes: {
              icon: isMouseOver ? classes.icon : null
            }
          }}
          helperText="Please select your currency"
        >
          {currencies.map((option) => (
            <option key={option.value} value={option.value}>
              {option.label}
            </option>
          ))}
        </TextField>
      </div>
    </form>
  );
}

除此之外，我使用onMouseEnter和onMouseLeave触发器来应用您在鼠标悬停时必须更改图标颜色的特殊要求。