[英]How to change the hover effect color on the options of material ui select component in react js?
I was trying to change the hover effect of mui Auto Complete component options [inside the drop down].我试图更改 mui 自动完成组件选项 [在下拉列表中] 的 hover 效果。 But it seems I can not find the proper method to do so.
但似乎我找不到这样做的正确方法。
This is the hover effect I am trying to change: Image这是我要更改的 hover 效果:图片
I want to put my own color choice.我想把我自己的颜色选择。
This is my code [sorry I am new to react.这是我的代码[抱歉,我是新来的。 pretty bad codes].
非常糟糕的代码]。
I tried many solution from stack overflow and other websites.我尝试了堆栈溢出和其他网站的许多解决方案。 They did not work for me [may be because I did not understand what they were saying].
他们没有为我工作[可能是因为我不明白他们在说什么]。
I just want to change the hover effect color, when the mouse hovers over the options inside the select compon.net.我只想更改 hover 效果颜色,当鼠标悬停在 select compon.net 内的选项上时。 But I can not figure out how to do it.
但我不知道该怎么做。
This is my component Image这是我的组件图像
export default function SelectBox ( { ...props } ) {
return (
<Autocomplete
autoComplete={ true }
disablePortal
id="combo-box-demo"
options={ props.options }
ChipProps={ { backgroundColor: "green" } } // I have no idea what this does
sx={ {
width: { xs: 100, sm: 130, md: 150, lg: 170 },
// no idea what this does too
"& + .MuiAutocomplete-popper .MuiAutocomplete-option[aria-selected='true']" :
{
backgroundColor: "#FF8787",
},
} }
renderInput={ ( params ) => <TextField { ...params } label={ props.label } size='small' className='color-change'
sx={ {
width: "80%", backgroundColor: "#F1F1F1",
'.MuiOutlinedInput-notchedOutline': {
borderColor: '#C6DECD',
}, borderRadius: 2,
"&:hover .MuiOutlinedInput-notchedOutline": {
borderColor: "green"
}, "&:hover": {
"&& fieldset": {
border: "1px solid green"
}
}
} } /> }
/>
);
}
Assuming that the goal is to customize the background color of options when being hovered, it seems that posted code just need to add :hover
to a selector for the sx
prop of Autocomplete
.假设目标是在悬停时自定义选项的背景颜色,似乎发布的代码只需要将
:hover
添加到Autocomplete
的sx
道具的选择器中。
Simplified example tested here: stackblitz此处测试的简化示例: stackblitz
Change the following selector:更改以下选择器:
"& + .MuiAutocomplete-popper .MuiAutocomplete-option[aria-selected='true']": {
backgroundColor: "#FF8787",
};
To add :hover
so that it selects the hovered:添加
:hover
以便它选择悬停:
// 👇 Select the hover item here
'& + .MuiAutocomplete-popper .MuiAutocomplete-option:hover': {
// 👇 Customize the hover bg color here
backgroundColor: "#FF8787",
};
Full example for Autocomplete
, the original selector is kept in here so it customizes the selected item to match the hover effect, but this an optional approach. Autocomplete
的完整示例,原始选择器保留在这里,因此它自定义所选项目以匹配 hover 效果,但这是一种可选方法。
export default function SelectBox(props) {
return (
<Autocomplete
autoComplete={true}
disablePortal
id="combo-box-demo"
options={props.options}
ChipProps={{ backgroundColor: "green" }}
sx={{
width: { xs: 100, sm: 130, md: 150, lg: 170 },
// 👇 Select the hover item here
"& + .MuiAutocomplete-popper .MuiAutocomplete-option:hover": {
// 👇 Customize the hover bg color here
backgroundColor: "hotpink",
},
// 👇 Optional: keep this one to customize the selected item when hovered
"& + .MuiAutocomplete-popper .MuiAutocomplete-option[aria-selected='true']:hover":
{
backgroundColor: "hotpink",
},
}}
renderInput={(params) => (
<TextField
{...params}
label={props.label}
size="small"
className="color-change"
sx={{
width: "80%",
backgroundColor: "#F1F1F1",
".MuiOutlinedInput-notchedOutline": {
borderColor: "#C6DECD",
},
borderRadius: 2,
"&:hover .MuiOutlinedInput-notchedOutline": {
borderColor: "green",
},
"&:hover": {
"&& fieldset": {
border: "1px solid green",
},
},
}}
/>
)}
/>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.