Material-ui: [SelectField] How to change/override "color" style of selected option of SelectField ?

[wzup]

I cannot override color style for selected option. It is always black:

element.style {
    color: rgba(0, 0, 0, 0.870588);  // <---
    line-height: 56px;
    opacity: 1;
    position: relative;
    padding-left: 0px;
    padding-right: 48px;
    top: 6px;
}

I have set all possible related style options and neither works.

                <SelectField
                    value={this.state.value}
                    onChange={this.onChange}
                    floatingLabelText={this.state.floatingLabelText}
                    floatingLabelStyle={{color: '#fff'}} // <--
                    underlineStyle={{display: 'none'}}
                    errorText={this.state.errorText}
                    selectFieldRoot={{color: "#fff"}} // <--
                    style={{color: "#fff"}} // <--
                    iconStyle={{color: "#fff"}} // <--
                >
                    {this.state.source}
                </SelectField>

How do you override color?

[oliviertassinari]

At this moment, you can only change the palette.accent1Color key. There is one style property on the Menu component for this: selectedMenuItemStyle, but that property is not accessible from the SelectField component.

[wzup]

palette.accent1Color is not a color of _selected_ option. It is a text color of _options_ inside list of options to choose from:

And I'd like to change this color, a color of _selected_ option. Set it color: #fff:

I found that it is a textColor ( textColor: _colors2.default.darkBlack, ). I've created my theme:

import Colors from 'material-ui/lib/styles/colors';
import ColorManipulator from 'material-ui/lib/utils/color-manipulator';
import Spacing from 'material-ui/lib/styles/spacing';
import zIndex from 'material-ui/lib/styles/zIndex';

export default {
    spacing: Spacing,
    zIndex: zIndex,
    fontFamily: 'Roboto, sans-serif',
    palette: {
        textColor: Colors.white,
    }
};

But the problem now it that textColor is not only a color of _selected_ option but also a color of _options_ to choose from. So if I set it textColor: Colors.white, I cannot see options because of white layout of dropdown list:

How to change only the color of _selected_ option, not of all options in the list of options?

[oliviertassinari]

palette.accent1Color is not a color of selected option.

Sorry but yes it's. For instance, here, I'm using accent1Color = colors.green100

[wzup]

Ok, I see.
How to override _only_ this color? without changing any other text colors. I need it to be white.

[oliviertassinari]

You can change the color of the selected text like this:

import getMuiTheme from 'material-ui/lib/styles/getMuiTheme';

const muiTheme = getMuiTheme({}, {
  menuItem: {
    selectedTextColor: 'white',
  },
});

But in your case, you want to change the color of the text field, use inputStyle.

[thomasmery]

Hi,

just found out about selectedMenuItemStyle not being passed down to the Menu in SelectField

is there a reason why this is not possible/implemented?

many thanks

[ishwinder]

@wzup were you able to get this going ?

[aaronboss]

Did you try labelStyle?

<SelectField labelStyle={{ color: 'green' }} />

[samrocksc]

how do you get rid of the underline on these components....geeze louise.

[DoubleU23]

as @thomasmery said:

just found out about selectedMenuItemStyle not being passed down to the Menu in SelectField

thats solved in #5379
but thats only a "quickfix"

with that you can just set the 'selectedTextColor' on the compiled theme (before injecting it into the context)

const muiTheme = getMuiTheme(myBaseTheme)
muiTheme.menuItem.selectedTextColor = '#BADA55'

i would prepare a PR for a 'labelSelectedStyle' if i got the OK/Feedback and time.

[dahei]

@wzup @oliviertassinari

The initial question does not seem to be answered yet? How can we change the color of the selected option, as @wzup asked and described in detail?

muiTheme.menuItem.selectedTextColor = '#BADA55'

has no effect, when using a SelectField.

palette.accent1Color = 'red'

changes the color within to flyover list, when the user has opened the SelectField.

But the selected option, which is displayed, when the SelectField is closed (see screenshot) has still the old color. IMHO there is no clear solution from the answers above or I just don't get it ;)

[oliviertassinari]

The question has been answered by @aaronboss, thanks!
For instance http://www.webpackbin.com/4JzBGxXUM.

[dahei]

@oliviertassinari Thanks for the heads-up! labelStyle is working!

[rpk-red]

@oliviertassinari link is not working.

[noneuf]

@oliviertassinari dead link bro

[oliviertassinari]

@noneuf we are now working on v1-beta. You can always ask on StackOverflow.

[AbuKalamAzad]

const theme = createMuiTheme({
    overrides: {
        MuiSelect: {
            select: {
                "&:focus": {
                    background: "#3A3660"
                },
                color:'white'
            }
        },
    }
});