Material-ui: [SelectField] selected item color is pink while styles are set to other color

[liesislukas]

Problem description

selected item has pink color even if it has extra styles setting color.

when collapsed coloring is correct:

Steps to reproduce

 <SelectField
              labelStyle={{color: orange500}}
              ...
            >
              <MenuItem value={1} key={1} primaryText={'low'} style={{color: green500}}/>
              <MenuItem value={2} key={2} primaryText={'medium'} style={{color: orange500}}/>
              <MenuItem value={3} key={3} primaryText={'high'} style={{color: red500}}/>
            </SelectField>

Versions

• Material-UI: 0.15.0
• React: 15.1.0
• Browser: Chrome: Version 51.0.2704.84 (64-bit)

[ghost]

I had the same problem and to fix it I simply modified the muiTheme

import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
const muiTheme = getMuiTheme({
    palette: {
        accent1Color: 'rgb(0, 84, 129)',
        secondary2color: "rgb(0, 84, 129)"
    },
});

render(){
       return (
             <MuiThemeProvider muiTheme={muiTheme}>
                   ................
            </MuiThemeProvider>
       )
}

[liesislukas]

Will it make a lot of side effects on other elements too? Is it possible to wrap single element with MuiThemeProvider to have diff theme then all other elements on app?

[ghost]

You wrap it on a single Component if you don't want it to mess with your whole application.

[aahan96]

@liesislukas This is done so that the selected option is known. I don't think the selected item should retain it's color

[liesislukas]

@aahan96 there should be an option for that or workaround documented what @davidebarros mentioned here