如何在 MUI 中对齐水平图标和文本

Posted 2023-02-22

【中文标题】如何在 MUI 中对齐水平图标和文本

【英文标题】：How to align horizontal icon and text in MUI

【发布时间】：2019-01-27 03:20:09

【问题描述】：

我是 MUI 的新手，现在我的图标和文字没有对齐：

我想要的结果：

我的代码是：

<div style=
    display: 'inline-flex',
    VerticalAlign: 'text-bottom',
    BoxSizing: 'inherit',
    textAlign: 'center',
    AlignItems: 'center'
>
    <LinkIcon className=classes.linkIcon  />
    revolve
</div>  

我尝试了网格和行，但不起作用。谁能帮帮我？

【参考方案1】：

这很好用！

<div style=
    display: 'flex',
    alignItems: 'center',
    flexWrap: 'wrap',
>
    <LinkIcon />
    <span>revolve</span>
</div>  

【讨论】：

我使用了该样式，但将它们应用于单个 Typography，因此我不需要 p 元素。与v4.0.2 一起发挥魅力。

【参考方案2】：

您需要使用网格。 类似的东西应该有效：

<Grid container direction="row" alignItems="center">
  <Grid item>
    <LinkIcon className=classes.linkIcon />
  </Grid>
  <Grid item>
    revolve
  </Grid>
</Grid>

【讨论】：

完美，如果默认情况下文本比行长，网格开始换行，这意味着文本将位于图标下方，为防止这种情况，您可以添加wrap="nowrap"

【参考方案3】：

试试下面的代码。您可以根据需要使用variant。

const useStyles = makeStyles(theme => (
  wrapIcon: 
    verticalAlign: 'middle',
    display: 'inline-flex'
   
));

<Typography variant="subtitle1" className=classes.wrapIcon>
    <LinkIcon className=classes.linkIcon  /> revolve
</Typography>

【讨论】：

你好 @chetan-gawai 我不太清楚你在哪里使用你最初定义的 useStyles 变量......

@maxxyme 通常示例是函数中的const classes = useStyles();。您可以看到classes 在渲染/返回中的使用位置。

嗨，如何在图标和文本之间添加水平间距？

嗨..终于我解决了我的问题

【参考方案4】：

另一种简单的解决方案

<Grid container direction="row" alignItems="center">
     <SearchIcon /> example
</Grid>

【参考方案5】：

样式

const styles = theme => (
    icon: 
        position: "relative",
        top: theme.spacing.unit,
        width: theme.typography.display1.fontSize,
        height: theme.typography.display1.fontSize
    
);

JSX

<Typography variant="display1">
    <Icon className=this.props.classes.icon/>Your&nbsp;Text
</Typography>

您可以在所有 3 个位置将 display1 替换为 display3 或另一个 typography variant 以选择您的文本大小。   确保您的文本在换行时不会在单词之间中断。

对我来说，这可以呈现如下

带有display3 和其他一些颜色样式。

【讨论】：

你好 @nxtman123 我不太清楚你在哪里使用你的 styles 最初定义的变量......

@maxxyme 变量进入withStyles HOC 见material-ui.com/styles/basics/#higher-order-component-api

有趣的答案，现在你会写：icon: position: "relative", top: theme.spacing(0.5), width: theme.typography.body1.fontSize, height: theme.typography.body1.fontSize

@EricBurel，我已经有一段时间没有与 Material UI 密切合作了，所以请随时编辑这个答案以反映 Material UI 近年来的变化。我知道他们有一个新的排版系统？我的“排版变体”链接似乎已过时。

【参考方案6】：

将ListItemIcon 和ListItemText 包裹在ListItem 中将保持在一行中并防止中断：

import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
    
<ListItem >
  <ListItemIcon><AccessAlarmIcon color="secondary" /></ListItemIcon>
  <ListItemText>Updated 1 hour ago</ListItemText>
</ListItem>

演示图片：

【讨论】：

您能否在答案中添加更多上下文

请放一个指向您尝试附加的图片的链接，并解释为什么ListItem 可以解决问题。

@Sabareesh，我可以看出你是 Stack Overflow 的新手，所以欢迎加入社区。回答问题时，解释为什么你的答案有效会很有帮助。我不确定AccessAlarmIcon 是如何神奇地垂直对齐的，所以请解释一下为什么会这样。

【参考方案7】：

您也可以使用 Material UI 的Flexbox component。

例如：

// ...
import  Box  from '@material-ui/core';
// ...

<Box alignItems="center" display="flex">
 <Box>
    <LinkIcon className=classes.linkIcon  />
 </Box>
 <Box>
    revolve
 </Box>
</Box>

alignItems: center 属性将垂直对齐内部项目。

这将添加一些额外的标记。但是，如果您查看组件的 API，则会发现很多额外的灵活性。如 例如，use margin or padding 的方法与您的 Material UI 实现的其余部分一致。如果出现用例，也很容易以不同的方式对齐项目。

【参考方案8】：

你可以在上面导入这些

import  Grid, Typography  from "@material-ui/core";
import LinkIcon from "@material-ui/icons/Link";

你可以使用

<Grid style= display: "flex" >
    <LinkIcon />
    <Typography>Revolve</Typography>
</Grid>

沙盒示例Here

【参考方案9】：

这可以通过使用Stack 并将alignItems 属性设置为center 在MUI v5 中轻松实现：

import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import AddCircleIcon from '@mui/icons-material/AddCircle';

<Stack direction="row" alignItems="center" gap=1>
  <AddCircleIcon />
  <Typography variant="body1">text</Typography>
</Stack>

【讨论】：

这真的很有帮助。谢谢。

【参考方案10】：

同样的问题，这就是我所做的。

import LinkIcon from '@material-ui/icons/Link';
import styled from 'styled-components';
...
const Resolve = styled.div`
  display: flex;
  vertical-align: middle,
`;

<Resolve>
  <LinkIcon style= marginRight: '5px'  />
  <p>resolve</p>
</Resolve>

如果您对 mUI 默认链接图标不满意，您可以随时 DIY：

/* this is the same chained icon used in the own material-ui, 
idk why this ins't avaiable yet */

function CustomLinkIcon(props) 
  return (
    <SvgIcon ...props>
      <path d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z" />
    </SvgIcon>
  );

...
<Resolve>
  <CustomLinkIcon 
     /* adjust margin top if needed */
     style= marginRight: '3px', marginTop: '3px'  
  />
  <p>resolve</p>
</Resolve>

【参考方案11】：

最好的选择就是这样使用它：

  import Box, Typography from '@material-ui/core'
  import LinkIcon from '@material-ui/icons/LinkIcon';

   ........

   <Box display='flex' alignItems='center'>
       <LinkIcon className=classes.linkIcon  />
       <Typography variant='h5'>
          resolve
       </Typography>
    </Box>