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

Question

我想将列表项的文本左对齐。目前，我有这个：

如何左对齐文本？

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

Answer 1

Tailwind.css 让这变得简单。只需将 className='w-24' 添加到 <ListItemIcon />.

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 className='w-24'>
               <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);

Answer 2

至此，既然您已经实现了字体大小，请在 ListItemIcon 元素的 class 中使用 width，例如 24px。

...
const styles = theme => ({
  listItemIcon: 24,
});

...

<ListItemIcon className={classes.listItemIcon}>
 <FontAwesomeIcon className='text-4xl' icon={item.icon} />
</ListItemIcon>

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

How to left-align all list items using React Material-UI, fontAwesome icons and Tailwind.css

css

reactjs

font-awesome

material-ui

tailwind-css