Как выровнять элементы списка React Material-UI, используя значки fontAwesome и Tailwind.css

Question

Я хочу выровнять текст моих пунктов списка по левому краю. Я также хочу сделать все иконки одинакового размера. Размер значка конверта, используемого с элементом списка Gmail. В настоящее время у меня есть это:

Как я могу сделать это?

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 DraftsIcon from '@material-ui/icons/Drafts';    
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faFacebook, faGoogle, faGooglePlus, faTwitter, faYoutube, } from '@fortawesome/free-brands-svg-icons';

const styles = theme => ({
  root: {
    width: '100%',
    maxWidth: 360,
    backgroundColor: theme.palette.background.paper,
  },
  container: {
    width: '20px', // this does not work
  }
});

function SimpleList(props) {
  const { classes } = props;
  return (
    <div className={classes.root}>
      <List component="nav">
        <ListItem button>
          <ListItemIcon className="container">
            <FontAwesomeIcon icon={faGoogle} />
          </ListItemIcon>
          <ListItemText primary="Login with Google" />
        </ListItem>
        <ListItem button>
          <ListItemIcon className="container">
            <FontAwesomeIcon icon={faTwitter} />
          </ListItemIcon>
          <ListItemText primary="Login with Twitter" />
        </ListItem>
        <ListItem button>
          <ListItemIcon className="container">
            <DraftsIcon />
          </ListItemIcon>
          <ListItemText primary="Login with Gmail" />
        </ListItem>
        <ListItem button>
          <ListItemIcon className="container">
            <FontAwesomeIcon icon={faFacebook} />
          </ListItemIcon>
          <ListItemText primary="Login with Facebook" />
        </ListItem>
        <ListItem button>
          <ListItemIcon className="container">
            <FontAwesomeIcon icon={faYoutube} />
          </ListItemIcon>
          <ListItemText primary="Login with Youtube" />
        </ListItem>
        <ListItem button>
          <ListItemIcon className="container">
            <FontAwesomeIcon icon={faGooglePlus} />
          </ListItemIcon>
          <ListItemText primary="Login with Google Plus" />
        </ListItem>
      </List>
    </div>
  );
}

SimpleList.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(SimpleList);

Answer 1

Использование CSS fontSize в FontAwesomeIcon и DraftsIcon должно помочь. Скорее всего, вам также придется переопределить любые отступы по умолчанию и поля на иконках.

...
const styles = theme => ({
  root: {
    width: '100%',
    maxWidth: 360,
    backgroundColor: theme.palette.background.paper,
  },
  faIcon: {
    fontSize: 18,
    // padding if needed (e.g., theme.spacing.unit * 2)
    // margin if needed
  },
  muiIcon: {
    fontSize: 18,
    // padding if needed
    // margin if needed
  }
});

class SimpleList extends React.Component {
  render() {
    const { classes } = this.props;

    const list = [
      { 
        label: 'label 1', 
        icon: <FontAwesomeIcon className={classes.faIcon} icon={faTwitter} />
      },
      {
        label: 'label 2', 
        icon: <DraftsIcon className={classes.muiIcon} />
      }
    ];

    return <div className={classes.root}>
      <List component='nav'>
       {
         list.map((item, key) => (
           <ListItem button>
             <ListItemIcon>
               { item.icon }
             </ListItemIcon>
             <ListItemText primary={ item.label } />
           </ListItem>
         ))
       }
      </List>
    </div>;

  }
}

SimpleList.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(SimpleList);