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

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

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