Блог

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

Выбранный элемент меню имеет этот цвет фона:

И после того, как я выбираю элемент, компонент выбора имеет фокус, который выглядит следующим образом:

Вот мой компонент выбора и элемент меню внутри него:

 <Select
    classes={{ focused: classes.selected }}
>
    <MenuItem
        classes={{ selected: classes.selected }}
    >
        Never
    </MenuItem>
</Select>
 

и я просто попытался переопределить цвет фона, чтобы он был таким же, как обычно:

 focused: {
    backgroundColor: "#fff",
},

selected: {
    backgroundColor: "#fff",
},
 

Любые советы, как удалить или переопределить эти цвета фона? Выбранный компонент не должен сохранять фокус после выбора опции.

РЕДАКТИРОВАТЬ: выяснил, где появляется focused, и я почти уверен, что мне нужно настроить таргетинг на него через inputProps, но не знаю как:

чтобы изменить bg сфокусированного Select компонента, выберите root класс с помощью classes prop и добавьте :hover стили.

 <Select classes={{ root: classes.selectRoot }}>
{... menuitems}
</Select>
 

 const useStyles = makeStyles((theme) => ({
  selectRoot: {
  //...other styles
    'amp;:focus':{
      backgroundColor:'yellow'
    }
  }
}));
 

И для изменения bg выбранного MenuItem необходимо сделать что-то подобное. Для этой цели selected и root класс MenuItem .

 <MenuItem
  classes={{ selected: classes.selected, root: classes.rootMenuItem }}
  value={"1"}>
  Never
</MenuItem>
 

 const useStyles = makeStyles((theme) => ({
  selected: {
  },
  rootMenuItem: {
    "amp;$selected": {
      backgroundColor: "red",
        "amp;:hover": {
          backgroundColor: "green"
         }
      },
    'amp;:hover':{
      backgroundColor:'blue'
    }
  }
}));
 

Другой способ стилизации MenuItem : —
Предоставление классов classes={{ selected: classes.selected, root: classes.rootMenuItem }} каждому ListItem не является предпочтительным, это увеличит повторение кода, а также нарушит некоторые правила чистого кода (если они соблюдаются). Итак, чтобы преодолеть это, создайте пользовательский список, используя withStyles .

 const CustomMenuItem = withStyles((theme) =>createStyles({
  root:{
        "amp;$selected": {
            backgroundColor: "red",
            "amp;:hover": {
                backgroundColor: "green"
            }
    },
    'amp;:hover':{
      backgroundColor:'blue'
    }
  },
  selected:{
    
  }
})
)(MenuItem);
 

Теперь используйте это CustomMenuItem вместо ListItem .

 <Select classes={{ root: classes.selectRoot }}>
  <CustomMenuItem value={"1"}>Never1</CustomMenuItem>
  <CustomMenuItem value={"2"}>Never2</CustomMenuItem>
  <CustomMenuItem value={"3"}>Never3</CustomMenuItem>
</Select>
 

Примечание: — Я добавил случайные цвета фона здесь.

Рабочая демонстрация:-

После прочтения вашего предложения я добавил :focus глобальную тему в свой App.js файл, вот так:

 MuiSelect: {
  outlined: {
    'amp;:focus': {
      backgroundColor: '#FFF'
    }
  }
},
 

Спасибо!