Skip to content
Advertisement

responsive buttongroup buttons in material ui + reactjs app

How to achieve responsive ButtonGroup Buttons? I found some information that material-ui’s ButtonGroup can use an attribute called “Orientation” but I don’t understand how to use it with media queries which means changing its orientation in real-time when the device has a narrow width etc. I’m new to this so bear with me.

JavaScript

Advertisement

Answer

First you need to specify the criteria for mediquery as below:

JavaScript

Then change the orientation based on the value of matches:

JavaScript

as you can see in this sandbox link, the orientation of the ButtonGroup is horizontal when the width is higher than 600px and it’s vertical for the lower width values.

You can also read here about the Media queries in Material UI, and here about the ButtonGroup APIs and props.

User contributions licensed under: CC BY-SA
1 People found this is helpful
Advertisement