Menu
In MUI, I'd like to use:
List and ListItem but have them appear horizontally.
What's the best way?
451
To make a horizontal list with React Material UI, we can set the style of the List to have the display CSS property set to 'flex' . We call makeStyles with a function that returns an object with the root class. The root class property is set to an object that has the display property set to 'flex' .
If you want to make this navigational unordered list horizontal, you have basically two options: Make the list items inline instead of the default block. .li { display: inline; } This will not force breaks after the list items and they will line up horizontally as far as they are able. Float the list items.
By default, the HTML <ul> list will be rendered vertically with one list item on top of another. When you need to create a list that expands horizontally, you need to add the display:inline style to the <li> elements of the list.
So far I have:
const flexContainer = { display: 'flex', flexDirection: 'row', padding: 0, }; return ( <List style={flexContainer}> <ListItem primaryText="foo1" secondaryText="bar1"/> <ListItem primaryText="foo2" secondaryText="bar2"/> </List> ); This works. Looking for a potential better answer / opinions. Should this be built in?
104
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With