Material-ui: Snackbar - can't modify font color

[raptoria]

can't change text color of Snackbar.. tried setting 'color' , 'textColor' inside of style and bodyStyle attributes to no avail. Is there any way to access the inner span's color? Using react 0.14 and material-ui 0.14.2

[alitaheri]

@raptoria There is a way, but it's not very straightforward. You will need to change the value of snackbar.textColor on your theme object. In other words you will have to change the color for every snackbar. if that's alright with you then whenever you are creating a theme object just do this muiTheme.snackbar.textColor = YOUR_COLOR; otherwise, you're welcome to create PR adding that prop to the component here and here :grin:

[raptoria]

is there a way to specify this in my Theme file? I'm using the es7 decorator pattern eg.
@ThemeDecorator(ThemeManager.getMuiTheme(MyRawTheme))

so it would be nice to not have to call "muiTheme" directly

[alitaheri]

There is a yet undocumented way. It was recently added and we haven't had the time to document it properly.

@ThemeDecorator(ThemeManager.getMuiTheme(MyRawTheme, {snackbar:{textColor: '#123456'}}))

If you look at the source of that function you will see that the theme defaults to lightBaseTheme and then it is merged with the first argument (that means you can Override items on the raw theme, you don't have to specify one entirely) and then it calculates the actual theme object and deep merges the second argument onto it. This means you can also override items from the calculated theme directly with the same functions.

[raptoria]

Thanks for this. Somehow the override didn't work, not sure why..
I'll wait for the feature request to be complete.

[dennischen]

Hi
Use theme can just set one color in all case, right?.
How can I set the message color dynamically? I want to set different color for INFO, WARN, and ERROR.
There is bodyStyle , however it can just override background color.
message color element is always applied a inline color, without a 'messageStyle' , it looks impossible to set color in dynamic case. (except !imporant).
any suggestion?

[dennischen]

Just had solution by add textColor:'inherit'
const muiTheme = getMuiTheme({ palette: {}, snackbar: { textColor: 'inherit' } });
then I can set the background-color and color by bodyStyle

[afkatja]

It still seems impossible to override styling of the SnackBar,
using

const config ={
  ...
  message: {
    backgroundColor: '#fff',
    color: '#444'
};

<Snackbar
          open={someFunction}
          message="Message"
          autoHideDuration={2000}
          bodyStyle={config.message}
          style={config.message}
        />

[damianobarbati]

@oliviertassinari what about the color of the action?
No documented prop like actionColor but it does exist in the muiTheme object.
Right now I'm doing:

let theme = getMuiTheme({
    fontFamily: 'Verdana',
    snackbar: { actionColor: '#fff' },
});

Not very clean though, as it does not allow nice color binding through props! :)

[oliviertassinari]

@damianobarbati We need to address #2835 so users can easily override things without us providing additional API.

[Serexx]

I may be misunderstanding but rather than override I was able to achieve the same effect by providing "Message" as a React Element and styling it accordingly. The below gave me both a 'clear' icon (svg) and a style-able button. I simply left out the 'action=' param.

~~~~jsx
const msg = (

touch={true} tooltipPosition="top-right">

);

[caub]

@afkatja use className

with material-ui@next:

<Snackbar
          open={someFunction}
          message="Message"
          autoHideDuration={2000}
          SnackbarContentProps={{
            className: classes.bg, // this works for styling
            style: { backgroundColor: 'yellow' }, // this can't work for some reason
          }}
        />

I can't manage to understand why style is lost somewhere though

[oliviertassinari]

I can't manage to understand why style is lost somewhere though

😨

[caub]

repro: https://codesandbox.io/s/8ynj26qpj0 it should be red background, debugging currently locally

[oliviertassinari]

@cauld It's a bug with the transitions! It can be easily fixed. We are overriding the value provided in:
https://github.com/mui-org/material-ui/blob/e5d244b4d13d29c21b30bc5d76a147d345de562e/src/transitions/Slide.js#L204
(This line is important to https://github.com/reactjs/react-transition-group/blob/5007303e729a74be66a21c3e2205e4916821524b/src/Transition.js#L343)
Would you mind opening an issue? Even better would be to fix all our transitions component.

[caub]

Ah, thanks ok

[caub]

@oliviertassinari I'm not sure how you meant to fix it, removing the style={style} in Slide fixes it, but it's needed for server-rendering

https://jsfiddle.net/crl/xdeaf8p0/2/

https://jsfiddle.net/crl/xdeaf8p0/4/ would fix it, but that part of code is in react-transition

hmm edit, like this: https://jsfiddle.net/crl/xdeaf8p0/7