如何样式化 Mui AutoComplete 的 endAdornment 图标

huangapple
go评论95阅读模式
英文:

how to style Mui AutoComplete endAdornment icon

问题

我尝试更改 Mui Autocomplete 的向下图标的颜色和大小，这是我尝试过的内容，但它不起作用：

  1. <Autocomplete
  2.   disablePortal
  3.   id="search-bar"
  4.   options={data}
  5.   sx={{
  6.     width: "100%",
  7.     flex: 1,
  8.     "& .MuiAutocomplete-root": {
  9.       padding: "0px",
  10.     },
  11.   }}
  12.   renderInput={(params) => (
  13.     <TextField
  14.       {...params}
  15.       InputLabelProps={{
  16.         sx: { color: "#12efc8" },
  17.       }}
  18.       name="subCategory"
  19.       type="text"
  20.       sx={{
  21.         width: "100%",
  22.         input: {
  23.           color: "#12efc8",
  24.         },
  25.         maxWidth: "inherit",
  26.         "& .MuiInputBase-root": {
  27.           height: "49px",
  29.           "&.focus": {
  30.             backgroundColor: "transparent",
  31.           },
  32.         },
  33.         "& .MuiFormControl-root": {
  34.           "& .MuiAutocomplete-endAdornment": {
  35.             color: "white",
  36.             scale: 2,
  37.           },
  38.         },
  39.       }}
  40.       variant="outlined"
  41.       label="Add Sub-Category"
  42.     />
  43.   )}
  44. />

我还尝试将以下代码移到父元素 (AutoComplete) 的样式中，但也没有起作用：

  1. "& .MuiAutocomplete-endAdornment": {
  2.   color: "white",
  3.   scale: 2,
  4. },

显然，图标的类是 .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:

  1. &lt;Autocomplete
  2.       disablePortal
  3.       id=&quot;search-bar&quot;
  4.       options={data}
  5.       sx={{
  6.         width: &quot;100%&quot;,
  7.         flex: 1,
  8.         &quot;&amp; .MuiAutocomplete-root&quot;: {
  9.           padding: &quot;0px&quot;,
  10.         },
  11.       }}
  12.       renderInput={(params) =&gt; (
  13.         &lt;TextField
  14.           {...params}
  15.           InputLabelProps={{
  16.             sx: { color: &quot;#12efc8&quot; },
  17.           }}
  18.           name=&quot;subCategory&quot;
  19.           type=&quot;text&quot;
  20.           sx={{
  21.             width: &quot;100%&quot;,
  22.             input: {
  23.               color: &quot;#12efc8&quot;,
  24.             },
  25.             maxWidth: &quot;inherit&quot;,
  26.             &quot;&amp; .MuiInputBase-root&quot;: {
  27.               height: &quot;49px&quot;,
  29.               &quot;&amp;.focus&quot;: {
  30.                 backgroundColor: &quot;transparent&quot;,
  31.               },
  32.             },
  33.             &quot;&amp; .MuiFormControl-root&quot;: {
  34.               &quot;&amp; .MuiAutocomplete-endAdornment&quot;: {
  35.                 color: &quot;white&quot;,
  36.                 scale: 2,
  37.               },
  38.             },
  39.           }}
  40.           variant=&quot;outlined&quot;
  41.           label=&quot;Add Sub-Category&quot;
  42.         /&gt;
  43.       )}
  44.     /&gt;

I've also tried moving the following code up to the styling of the parent element (AutoComplete), but it didn't work either:

  1.       &quot;&amp; .MuiAutocomplete-endAdornment&quot;: {
  2.         color: &quot;white&quot;,
  3.         scale: 2,
  4.       },

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。

例如：

  1. &amp; .MuiAutocomplete-endAdornment .MuiIconButton-root: {
  2.   color: "red",
  3.   width: 32,
  4.   height: 32,
  5. },

或者

  1. &amp; .MuiAutocomplete-endAdornment .MuiSvgIcon-root: {
  2.   color: "red",
  3.   width: 32,
  4.   height: 32,
  5. },

你可以在这里看到完整的示例链接。

英文:

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:

  1. &quot;&amp; .MuiAutocomplete-endAdornment .MuiIconButton-root&quot;: {
  2.   color: &quot;red&quot;,
  3.   width: 32,
  4.   height: 32,
  5. },

or

  1. &quot;&amp; .MuiAutocomplete-endAdornment .MuiSvgIcon-root&quot;: {
  2.   color: &quot;red&quot;,
  3.   width: 32,
  4.   height: 32,
  5. },

You can see the whole example here.

huangapple
  • 本文由 发表于 2023年8月5日 00:35:50
  • 转载请务必保留本文链接：https://go.coder-hub.com/76837769.html
  • material-ui
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定