更改箭头/图标颜色材料 ui 选择答案

【问题标题】：Changing the arrow/icon colour material ui select更改箭头/图标颜色材料 ui 选择
【发布时间】：2021-08-05 08:54:02
【问题描述】：

我正在尝试将我的图标更改为白色

这是我当前的代码，但不确定如何更改图标颜色属性：

链接到codesandbox 示例

 <NativeSelect
    
      disableUnderline
      style={{
        paddingLeft: 10,
        borderRadius: 20,
        color: "white",
        background: "#121c30",
        boxShadow: "0px 5px 8px -3px rgba(99,0,0,0.14)",
      }}
      
      defaultValue={"Last 7 days"}
      onChange={handleChange}
    >
      ......

    </NativeSelect>

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

该材料为您提供了一个类，用于更改该图标的颜色。

.MuiNativeSelect-icon {
   color: red
}

【讨论】：

【解决方案2】：

const MyIcon = (props)=> {
    const { style, ...otherProps } = props;
    const colorStyle = {
        color: 'white',
    };
    const styles = { ...style, ...colorStyle };
    return <ArrowDropDownIcon {...otherProps} style={styles} />
}

<NativeSelect
  IconComponent={MyIcon}
  ...
/>

【讨论】：

【解决方案3】：

我建议不要使用内联样式，因为您不能在 classes 属性中应用它们，在您的情况下这应该适合您

import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles({
  iconSelect: {
    color: "white"
  },
});

...
export default function App() {
   const classes = useStyles();
   ...
   <NativeSelect
          disableUnderline
          classes={{icon: classes.iconSelect}}
          ...
        >

https://codesandbox.io/s/table-forked-7w6nw

【讨论】：

【解决方案4】：

创建 .css，您的选择在哪里。那里。而不是写：color:white;你可以写color:white !important;

【讨论】：