Material design React List orientation

Question

Using MDC react list, trying to change the orientation, but not working always displays the list in vertical.

import List, { ListItem } from '@material/react-list';
import '@material/react-list/dist/list.css';

<List orientation="horizontal">
      <ListItem>
        test
      </ListItem>
      <ListItem>
        test
      </ListItem>
      <ListItem>
        test
      </ListItem>
    </List>

From the documentation

https://github.com/material-components/material-components-web-react/tree/master/packages/list

Answer 1

You can use display style as flex in a div container. flex-direction style states that the elements below div are displayed in a row or in a column. Row states that it is horizontal, column states that it is vertical. I am not sure but, you can add the style of div to List if this is not work.

This is the code:

import React from 'react';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';

export default function App() {
    return (
        <div style={{display: 'flex', flex-direction: 'row'}}>
            <List>
                <ListItem>
                    <ListItemText>Text 1</ListItemText>
                </ListItem>

                <ListItem>
                    <ListItemText>Text 2</ListItemText>
                </ListItem>

                <ListItem>
                    <ListItemText>Text 3</ListItemText>
                </ListItem>
            </List>
        </div>
    );
}