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

Posted 2023-03-06

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

【英文标题】：How to left-align all list items using React Material-UI, fontAwesome icons and Tailwind.css

【发布时间】：2019-03-28 05:04:49

【问题描述】：

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

如何左对齐文本？

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

【参考方案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);

【参考方案2】：

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

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

...

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