英文:
how to style Mui AutoComplete endAdornment icon
问题
我尝试更改 Mui Autocomplete 的向下图标的颜色和大小，这是我尝试过的内容，但它不起作用：
<Autocomplete
disablePortal
id="search-bar"
options={data}
sx={{
width: "100%",
flex: 1,
"& .MuiAutocomplete-root": {
padding: "0px",
},
}}
renderInput={(params) => (
<TextField
{...params}
InputLabelProps={{
sx: { color: "#12efc8" },
}}
name="subCategory"
type="text"
sx={{
width: "100%",
input: {
color: "#12efc8",
},
maxWidth: "inherit",
"& .MuiInputBase-root": {
height: "49px",
"&.focus": {
backgroundColor: "transparent",
},
},
"& .MuiFormControl-root": {
"& .MuiAutocomplete-endAdornment": {
color: "white",
scale: 2,
},
},
}}
variant="outlined"
label="Add Sub-Category"
/>
)}
/>
我还尝试将以下代码移到父元素 (AutoComplete) 的样式中，但也没有起作用：
"& .MuiAutocomplete-endAdornment": {
color: "white",
scale: 2,
},
显然，图标的类是 .MuiInputBase-root 的子类，但不确定为什么，因为它被称为 .MuiAutocomplete-endAdornment。
英文:
I'm trying to change the color and size of downwards icon for the Mui Autocomplete, this is what I've tried but it's not working:
<Autocomplete
disablePortal
id="search-bar"
options={data}
sx={{
width: "100%",
flex: 1,
"& .MuiAutocomplete-root": {
padding: "0px",
},
}}
renderInput={(params) => (
<TextField
{...params}
InputLabelProps={{
sx: { color: "#12efc8" },
}}
name="subCategory"
type="text"
sx={{
width: "100%",
input: {
color: "#12efc8",
},
maxWidth: "inherit",
"& .MuiInputBase-root": {
height: "49px",
"&.focus": {
backgroundColor: "transparent",
},
},
"& .MuiFormControl-root": {
"& .MuiAutocomplete-endAdornment": {
color: "white",
scale: 2,
},
},
}}
variant="outlined"
label="Add Sub-Category"
/>
)}
/>
I've also tried moving the following code up to the styling of the parent element (AutoComplete), but it didn't work either:
"& .MuiAutocomplete-endAdornment": {
color: "white",
scale: 2,
},
Apparently, the class for the icon is a subclass of .MuiInputBase-root, not sure how since it's called .MuiAutocomplete-endAdornment
答案1
得分: 1
Of course, you're right - 显然，图标的类是.MuiInputBase-root的子类，不确定为什么，因为它被称为.MuiAutocomplete-endAdornment。
它将样式设置为endAdornment。然而，如果你想改变Mui Autocomplete下拉图标的颜色和大小，你需要添加MuiIconButton-root或MuiSvgIcon-root。
例如：
& .MuiAutocomplete-endAdornment .MuiIconButton-root: {
color: "red",
width: 32,
height: 32,
},
或者
& .MuiAutocomplete-endAdornment .MuiSvgIcon-root: {
color: "red",
width: 32,
height: 32,
},
你可以在这里看到完整的示例链接。
英文:
Of course, you're right - Apparently, the class for the icon is a subclass of .MuiInputBase-root, not sure how since it's called .MuiAutocomplete-endAdornment.
It will set style to endAdornment. However, if you want to change the color and size of the downward icon for the Mui Autocomplete, you need to add MuiIconButton-root or MuiSvgIcon-root.
For example:
"& .MuiAutocomplete-endAdornment .MuiIconButton-root": {
color: "red",
width: 32,
height: 32,
},
or
"& .MuiAutocomplete-endAdornment .MuiSvgIcon-root": {
color: "red",
width: 32,
height: 32,
},
You can see the whole example here.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论