如何摆脱React Router的Link组件的下划线?

JavaScript

MandyL

2020-03-12

我有以下内容:

在此处输入图片说明

如何摆脱蓝色下划线?代码如下:

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

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

任何见识或指导将不胜感激。先感谢您。

第1126篇《如何摆脱React Router的Link组件的下划线?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

4个回答
ItachiEva 2020.03.12
style={{ backgroundImage: "none" }}

Only this worked for me

神奇Davaid 2020.03.12

What worked for me is this:

<Link to="/" style={{boxShadow: "none"}}>
神奇神乐 2020.03.12

// CSS

.navigation_bar > ul > li {
      list-style: none;
      display: inline;
      margin: 2%;
    }

    .link {
      text-decoration: none;
    }

// JSX

 <div className="navigation_bar">
            <ul key="nav">
              <li>
                <Link className="link" to="/">
                  Home
                </Link>
              </li>
            </ul>
          </div>
神乐路易 2020.03.12

您的App.css(或对应版本)中包含核方法

a{
  text-decoration: none;
}

这可以防止对所有<a>标签加下划线,这是此问题的根本原因

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android