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

私は以下を持っています：

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

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

MenuItemコンポーネントはhttp://www.material-ui.com/#/components/menuにあります

洞察やガイダンスをいただければ幸いです。前もって感謝します。

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

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

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

それが役に立てば幸い

を使用している場合は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} />;

MenuItem（およびボタンなどの他のMaterialUIコンポーネント）でreact-router-dom Linkを使用する最良の方法は、リンクを「コンポーネント」プロップで渡すことです。

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

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

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

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

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

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

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

コンポーネントに追加style={{ textDecoration: 'none' }}してLink下線を削除できます。あなたはまた、より追加することができますcssでstyleブロックなどstyle={{ textDecoration: 'none', color: 'white' }}。

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

// 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>

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

a{
  text-decoration: none;
}

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

私のために働いて、ただ追加className="nav-link"してactiveStyle{{textDecoration:'underline'}}

<NavLink className="nav-link" to="/" exact activeStyle= 
  {{textDecoration:'underline'}}>My Record</NavLink>

ここを見てください-> https://material-ui.com/guides/composition/#button。

これは公式のマテリアルUIガイドです。多分それは私にとってはあなたにとって有用でしょう。

ただし、場合によっては、下線が続くため、text-decoration： "none"を使用することもできます。よりクリーンな方法として、material-ui / coreからmakeStylesをインポートして使用できます。

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

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

const classes = useStyles();

次に、JSXコードでclassName属性を{classes.menu-btn}に設定します。

上の展開しGrgurの答え@あなたはインスペクタで見れば、あなたが使用していることを見つける、Linkコンポーネントが彼らにプリセットカラー値を提供しますcolor: -webkit-link。textDecorationデフォルトのハイパーリンクのように見せたくない場合は、これをオーバーライドする必要があります。

style={{ backgroundImage: "none" }}

これだけがうまくいきました

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

<Link to="/page">
    <Box sx={{ display: 'inline-block' }}>
        <PLink variant="primary">Page</PLink>
    </Box>
</Link>

場合によっては、Gatsbyコンポーネント内で別のコンポーネントを使用し、内部コンポーネントの周りにwithを<Link>追加するdivとdisplay: 'inline-block'、（例では「ページ」の）下線が表示されなくなります。

誰かがmaterial-uiのLinkコンポーネントを探している場合。プロパティunderlineを追加してnoneに設定するだけです

<Link underline="none">...</Link>

多分あなたのような問題を解決しました。Firefoxで要素を調べてみました。結果をいくつか示します。

1. それは私が調べた要素だけです。「リンク」コンポーネントは「a」タグに変換され、「to」プロップは「href」プロパティに変換されます。

2. そして、私が：hovとオプション：hoverにチェックインすると、結果は次のようになります：

ご覧のとおり、a：hoverにはtext-decoration：underlineがあります。私はcssファイルにのみ追加します：

a:hover {
 text-decoration: none;
}

そして問題は解決されました。しかし、私はテキスト装飾も設定します：他のいくつかのクラス（あなた：Dなど）には何もありません。

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

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