悬停 MUI 上的下划线动画答案

【问题标题】：Underline animation on hover MUI悬停 MUI 上的下划线动画
【发布时间】：2021-12-12 06:34:21
【问题描述】：

在有人删除这个问题并说它类似于this one之前，请听我说完。我正在尝试几乎完全完成该帖子中正在做的事情。问题是回复的人只是给出了一些没有回答手头问题的 CSS。我正在尝试在 MUI 中完全做到这一点。我希望能够使用makeStyles 钩子来设置我的组件的样式。

如何在诸如导航栏here 的排版组件下方实现下划线动画？我对 JS 和 MUI 真的很陌生，所以我希望能得到很好的解释和实现，这样我就可以学习术语以及框架本身。

到目前为止，这是我的代码。就像第一个链接中的一样。

const useStyles = makeStyles({
    link: {
        color: "white",
        position: "relative",

        "&:before": {
            content: "",
            position: "absolute",
            width: "0",
            height: "2px",
            bottom: "0",
            left: "0",
            backgroundColor: "#FFF",
            visibility: "hidden",
            transition: "all 0.3s ease-in-out",
        },
        "&:before:hover": {
            visibility: "visible",
            width: "100%"
        }
    }
});

function NavButton(props){

    const classes = useStyles();

    return (
        <a href={`/#${props.text}`}>
            <Link className={classes.link}>
                <Typography>{props.text}</Typography>
            </Link>
            {/*<p className={"hover-underline-animation"}*/}
            {/*    {props.text}*/}
            {/*</p>*/}
        </a>
    );
}

我接受任何其他类型的输入。这些问题对我来说既是一种学习方式，也是一种获得答案的方式。

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

工作代码

const useStyles = makeStyles({
  link: {
    color: 'white',
    position: 'relative',

    '&:before': {
      content: "''",
      position: 'absolute',
      width: '0',
      height: '2px',
      bottom: '-3px',
      left: '50%',
      transform: 'translate(-50%,0%)',
      backgroundColor: 'red',
      visibility: 'hidden',
      transition: 'all 0.3s ease-in-out',
    },
    '&:hover:before': {
      visibility: 'visible',
      width: '100%',
    },
  },
});

<Link underline="never" className={classes.link}>
  <Typography component="span">link</Typography>
</Link>

一些解释为什么您的代码不起作用：

将content: "" 更改为content: "''"。 Related answer。
将underline="never" 添加到Link 以删除悬停时锚元素中的内置下划线。
将Typography的根组件更改为span或将其显示设置为inline，使容器宽度和下划线宽度与文本内容匹配。
将&:before:hover改为&:hover:before：前者表示悬停下划线运行动画，但其宽度为0不能悬停，后者表示悬停链接运行线条动画。李>
添加这两行，使下划线从中间扩大：

left: '50%',
transform: 'translate(-50%,0%)',

【讨论】：

【解决方案2】：

我花了几个小时试图找到正确的组合来使用 Link 并覆盖 webkit 下划线，以防止我的导航中的链接在没有明确添加 text-decoration: none 到我的全局 CSS 的情况下出现下划线。在此示例中，我必须将 'textDecoration: 'none' 添加到 makeStyles 函数中，当然将红色更改为蓝色，但这对我的导航栏非常有用。

const useStyles = makeStyles({
  link: {
    color: 'white',
    position: 'relative',
    textDecoration: 'none',

    '&:before': {
      content: "''",
      position: 'absolute',
      width: '0',
      height: '2px',
      bottom: '-3px',
      left: '50%',
      transform: 'translate(-50%,0%)',
      backgroundColor: 'blue',
      visibility: 'hidden',
      transition: 'all 0.3s ease-in-out',
    },
    '&:hover:before': {
      visibility: 'visible',
      width: '100%',
    },
  },
})

【讨论】：