web-dev-qa-db-ja.com

Reactルーターのリンクコンポーネントの下線を取り除く方法は？

私は次のものを持っています：

enter image description here

青い下線を取り除くにはどうすればよいですか？コードは次のとおりです。

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

MenuItemコンポーネントは http://www.material-ui.com/#/components/men からのものです

洞察やガイダンスは大歓迎です。前もって感謝します。

javascriptreactjsreact-router
67
Jo Ko

インラインスタイルを使用しているようです。 textDecoration: 'none'は子で使用されますが、実際には<Link>内で使用する必要があります。

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

<Link>は基本的に標準の<a>タグを返すので、そこでtextDecorationルールを適用します。

それがお役に立てば幸いです

95
Grgur

styled-componentsを使用している場合、次のようなことができます。

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import styled from 'styled-components';


const StyledLink = styled(Link)`
    text-decoration: none;

    &:focus, &:hover, &:visited, &:link, &:active {
        text-decoration: none;
    }
`;

export default (props) => <StyledLink {...props} />;
40
JoeTidee

Linkコンポーネントにstyle={{ textDecoration: 'none' }}を追加して、下線を削除できます。 cssブロックにさらにstyleを追加することもできます。 style={{ textDecoration: 'none', color: 'white' }}。

<h1>
  <Link style={{ textDecoration: 'none', color: 'white' }} to="/getting-started">
    Get Started
  </Link>
</h1>
8
Shubham Verma

// 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>
3
Kushal Atreya

あなたのApp.css（または対応物）にある核アプローチがあります

a{
  text-decoration: none;
}

この問題の根本原因であるすべての<a>タグの下線を防ぎます

2
Dave Pile

MenuItem（およびボタンなどの他のMaterialUIコンポーネント）でreact-router-dom Linkを使用する最良の方法は、「c​​omponent」propでLinkを渡すことだと思います

<Menu>
   <MenuItem component={Link} to={'/first'}>Team 1</MenuItem>
   <MenuItem component={Link} to={'/second'}>Team 2</MenuItem>
</Menu>

「MenuItem」の「to」プロップにルートパスを渡す必要があります（これはLinkコンポーネントに渡されます）。この方法では、MenuItemスタイルを使用するため、スタイルを追加する必要はありません。

2
datatracer

@ Grgur's answer を展開すると、インスペクターを見ると、Linkコンポーネントを使用すると、プリセットカラー値color: -webkit-linkが得られることがわかります。デフォルトのハイパーリンクのように見せたくない場合は、textDecorationとともにこれをオーバーライドする必要があります。

enter image description here

1
AlleyOOP

私のために働いたのはこれです：

<Link to="/" style={{boxShadow: "none"}}>
0
Alex Mireles

リンクのスタイルを適切に削除する別の方法もあります。 textDecoration='inherit'とcolor='inherit'のスタイルを指定する必要があります。これらをスタイリングとしてlinkタグに追加できます：

<Link style={{ color: 'inherit', textDecoration: 'inherit'}}>

または、より一般的にするには、次のようなcssクラスを作成します。

.text-link {
    color: inherit;
    text-decoration: inherit;
}

そして、ちょうど<Link className='text-link'>

0
Panos