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

Posted 2023-03-06

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

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

【发布时间】：2019-03-27 20:57:30

【问题描述】：

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

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

【讨论】：

谢谢！这有帮助。您能否就实现该想法的代码提出任何建议？

如果没有，请告诉我。 :)

它没有回答原始对齐问题。但是，它确实帮助我解决了我的第二个问题：如何让所有图标大小相同。因此，我赞成并接受了它，因为您提供了帮助。我还将第一个问题分开并提出了一个新问题。如果您想再次尝试回答该问题，请在此处查看...***.com/q/52957859/1640892