我有以下几点:

如何去掉蓝色下划线? 代码如下:

<Link to="first"><MenuItem style={{paddingLeft: 13, textDecoration: 'none'}}> Team 1 </MenuItem></Link>

MenuItem组件来自http://www.material-ui.com/#/components/menu


当前回答

你可以在你的scss文件中使用这段代码; 这将消除不需要的颜色变化,

a:-webkit-any-link {
  &:hover {
    color: white;
  }
}

其他回答

a:-webkit-any-link {
  text-decoration: none;
  color: inherit;
}

下划线默认来自react-router-dom包。您可以执行以下操作来修复此问题。

<Link to="/route-path" style={{ textDecoration: 'none' }}> 
    // Rest of the code
</Link>

标准的a-link和react-link是一样的。

如果你要样式化a-link,它会自动样式化react-link。

一个{ 你想要什么造型 }

看这里-> https://material-ui.com/guides/composition/#button。

这是官方的材质界面指南。也许它对你会像对我一样有用。

然而,在某些情况下,下划线仍然存在,您可能需要使用text-decoration: "none"。为了更简洁的方法,您可以从material-ui/core导入并使用makestyle。

import { makeStyles } from '@material-ui/core';

const useStyles = makeStyles(() => ({
    menu-btn: {
        textDecoration: 'none',
    },
}));

const classes = useStyles();

然后将className属性设置为{classes。menu-btn}在JSX代码中。

添加css样式

a:link {
  text-decoration: none;
  color: #cc850a;
}

a:visited {
  text-decoration: none;
  color: #cc850a;
}

a:hover {
  text-decoration: none;
  color: #47a1ad;
}

a:active {
  text-decoration: none;
}