CODEWITHSUNDEEP
reactjsmaterial-ui
Gangrel
Gangrel

Reputation: 481

Changing the arrow/icon colour material ui select

I'm trying to change my icon to white enter image description here

Here is my current code but not sure how to change icon colour property:

Link to codesandbox sample

 <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>

Upvotes: 0

Views: 1108

Answers (4)

Petr Schukin
Petr Schukin

Reputation: 227

I would recommend not to use inline styles, as you cannot apply them in classes property, in your case this should work for you

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

Upvotes: 1

gu mingfeng
gu mingfeng

Reputation: 1050

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

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

Upvotes: 1

Erfan HosseinPoor
Erfan HosseinPoor

Reputation: 1077

The material provides you, one class, for changing the color of that icon.

.MuiNativeSelect-icon {
   color: red
}

Upvotes: 2

Spandan Manna
Spandan Manna

Reputation: 33

Create .css, where is your choice. there. instead of writing: color:white; you can write color:white !important;

Upvotes: 0

Related Questions