Change the height of a snackbar

Question

I can't access the width of the material-ui snackbar. When I use bodyStyle property and change height the app is updated accordingly. But why is width not changing?

You can do it through custom layout.. [here] (http://stackoverflow.com/a/33441214/5456671) — Muhammad Jamal, Nov 23 '16 at 08:58
thank you, but the example is for android. I am using it in web application in react. — jssql, Nov 23 '16 at 15:50

score 2 · Answer 1 · edited May 15 '17 at 20:30

2

You should add bodyStyle attribute with maxWidth and height, e.g.:

<Snackbar bodyStyle={{ maxWidth: '100%', height: 'auto' }} ... />

edited May 15 '17 at 20:30

marcelovca90

2,673
3
27
34

answered May 15 '17 at 16:32

Alwin

153
1
6

score 0 · Answer 2 · answered Nov 23 '16 at 17:21

0

Use the bodyStyle property, and set flexGrow to zero (material-ui has it set to 1 which is overriding the width):

<Snackbar message="BIG snack" bodyStyle={{ height: 200, width: 200, flexGrow: 0 }} open />

answered Nov 23 '16 at 17:21

Jeff McCloud

5,777
1
19
21

Change the height of a snackbar

2 Answers2