Apply custom styles to the snackbar

[steblin]

I'd like to set width and text-align. How can I do that?

[steblin]

Took a look into the code and that's how we can do that.

const snackStyles = {
  snack: {
    width: '300px',
    textAlign: 'center',
  },
};

<Snackbar customStyles={snackStyles}/>

Customizable are: snack(div wrapper), label(span) and button.

Think this should be added to the documentation.

[wireforce]

Ah, sorry, yes I will add that to the documentation :)

[T620]

Can we add css classes? Need to make it more responsive and would be much easier to do via @media targeting those classes.

Edit: Yes! (dist/components/Snackbar.js, line 239)

          "div",
          {
            style: this.populateStyles("snack"),
            onTransitionEnd: this.transitionEndHandler,
            className: "react-redux-snackbar" // add this line here
          }...

Then you can target the snackbar via .react-redux-snackbar

[girlslearningcodeyul]

Is it possible to overwrite transform: translate(-50%, 0px); and position the snackbar anywhere on the screen, I have been trying to put in in the bottom left corner of the screen, but I can't seem to get rid of the position in the middle.

Thank you