如何使用React Material-UI，fontAwesome图标和Tailwind.css左对齐所有列表项 [英] How to left-align all list items using React Material-UI, fontAwesome icons and Tailwind.css

问题描述

我想使列表项的文本左对齐.目前，我有这个:

I want to left-align the text of my list items. Currently, I have this:

如何使文本左对齐?

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

推荐答案

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

At this point, now that you've implemented font sizes, use width within a class on the ListItemIcon element, e.g., 24px.

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

...

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

这篇关于如何使用React Material-UI，fontAwesome图标和Tailwind.css左对齐所有列表项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！