如何使用fontAwesome图标和Tailwind.css对齐React材质UI列表项

我想将列表项的文本左对齐。我还想使所有的图标大小相同。与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);

---

在FontAwesomeIcon和DraftsIcon上使用fontSize CSS应该可以做到这一点。您很可能还需要覆盖图标上的任何默认填充和边距

...
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);

---

谢谢这很有帮助。你能就实现该想法的代码给出任何建议吗？如果没有，请告诉我：它没有回答最初的路线问题。然而，它确实帮助我解决了我的第二个问题：如何使所有图标大小相同。所以，我投了赞成票并接受了它，因为你帮助了我。我还把第一个问题分开，问了一个新问题。如果你想再次尝试回答这个问题，请在这里查看。。。