如何实现文本修饰：用MaterialUI <Link>'点缀'

Question

我正在努力在Material-UI <Link>组件上实现悬停点划线。以下代码似乎没有任何作用：

const useStyles = makeStyles(theme => ({
  link: {
    '&hover': {
      textDecoration: 'dotted'
    },
  },
}));

export default function Links() {
  const classes = useStyles();
  return (
    <Typography>
      <Link
       underline={'hover'}
        href="/"
        className={classes.link}
      >
        Some anchor text
      </Link>
    </Typography>
  );
}

还有其他选择吗？

Answer 1

这对我有用。

我必须更改两件事：

• 您必须将&hover更改为&:hover
• 您必须使用textDecorationStyle: 'dotted'而不是textDecoration: 'dotted'

Live Demo

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import { Typography, Link } from '@material-ui/core';


const useStyles = makeStyles(theme => ({
  link: {
    '&:hover': {
      textDecorationStyle: 'dotted'
    }
  },
}));

export default function Links() {
  const classes = useStyles();
  return (
    <Typography>
      <Link
        underline="hover"
        href="/"
        className={classes.link}
      >
        Some anchor text
      </Link>
    </Typography>
  );
}