I am trying to align the text of my list items to the left. Here is what I have currently:
https://i.stack.imgur.com/a5o5e.png
Is there a way to left-align the text in this code snippet?
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faFacebook, faGoogle, faGooglePlus, faTwitter, faYoutube } from '@fortawesome/free-brands-svg-icons';
import { faEnvelope } from '@fortawesome/free-solid-svg-icons';
const styles = theme => ({
root: {
width: '100%',
maxWidth: 360,
backgroundColor: theme.palette.background.paper,
},
});
const items = [
{ label: 'Google', icon: faGoogle },
{ label: 'Twitter', icon: faTwitter },
{ label: 'Gmail', icon: faEnvelope },
{ label: 'Facebook', icon: faFacebook },
{ label: 'Youtube', icon: faYoutube },
{ label: 'GooglePlus', icon: faGooglePlus },
]
function LoginList(props) {
const { classes } = props;
return (
<div className={classes.root}>
<List component='nav'>
{
items.map(item => (
<ListItem button key={item.label}>
<ListItemIcon>
<FontAwesomeIcon className='text-4xl' icon={item.icon} />
</ListItemIcon>
<ListItemText primary={`Login with ${item.label}`} />
</ListItem>
))
}
</List>
</div>
);
}
LoginList.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(LoginList);