Блог

У меня есть выделенный текстовый файл, и я хочу, чтобы при наведении курсора мыши или выборе текстового файла цвет стрелки вниз тоже менялся, это мой текстовый файл и его стиль

• Стиль

    const styles = theme => ({
       icon: {
           fill: themeStyle.textColor,
       },
      underline: {
           'amp;:before': {
               borderBottomColor: themeStyle.textFieldUnderLineColor,
           },
           'amp;:after': {
               borderBottomColor: themeStyle.tabIndicatorProps,
               color: themeStyle.tabIndicatorProps,
           },
           'amp;:hover:before': {
              borderBottomColor: [themeStyle.underLineSearchTextFieldColor, '!important'],
           },
           color: themeStyle.titleTextColor,
     },
     notchedOutline: {},
     outlinedInput: {
          'amp;$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>
   

• теперь я хочу изменить цвет этого при наведении курсора мыши или выборе или…

Вы должны использовать SelectProps свойство для подачи требуемого стиля.

Вот рабочий пример — https://codesandbox.io/s/material-demo-select-6lewu

Обратитесь к приведенному ниже,

 const useStyles = makeStyles((theme) => ({
  root: {
    "amp; .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 триггеры и для применения специального запроса, по которому вам нужно было изменить цвет значка при наведении курсора мыши.