रिएक्ट राउटर के लिंक घटक के लिए अंडरलाइन से कैसे छुटकारा पाएं?

Question

मेरे पास निम्नलिखित हैं:

मैं नीली रेखा से कैसे छुटकारा पाऊं? कोड नीचे है:

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

MenuItem घटक http://www.material-ui.com/#/compenders/menu से है

किसी भी अंतर्दृष्टि या मार्गदर्शन की बहुत सराहना की जाएगी। पहले ही, आपका बहुत धन्यवाद।

Comments

अपने बच्चों को नहीं घटक textDecoration: 'none'पर रखो <Link />।

— अज़ीम

Answer 1

मुझे लगता है कि आप इनलाइन शैलियों का उपयोग कर रहे हैं। textDecoration: 'none'बच्चे में उपयोग किया जाता है, जहां वास्तव में इसे <Link>इस तरह से इस्तेमाल किया जाना चाहिए :

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

<Link>अनिवार्य रूप से एक मानक <a>टैग लौटाएगा , यही कारण है कि हम textDecorationवहां नियम लागू करते हैं।

मुझे आशा है कि वह मदद करेंगे

Comments

वहाँ कोई रास्ता नहीं textdecoration के साथ वैश्विक सेट करने के लिए है? app.css में?

— 15

यह काम करता हैं :)। ध्यान रखें कि यदि आप शैली को अपने .css पर पेस्ट करते हैं (क्योंकि, निश्चित रूप से, आप इनलाइन शैलियों को पसंद नहीं करते हैं) तो यह हैtext-decoration: none;

— डेविड टोरेस

Answer 2

यदि आप उपयोग कर रहे हैं 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} />;

Answer 3

मुझे लगता है कि MenuItem (और अन्य सामग्री के घटक जैसे बटन) में प्रतिक्रिया-राउटर-डोम लिंक का उपयोग करने का सबसे अच्छा तरीका "घटक" प्रोप में लिंक को पास करना है

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

आपको "MenuItem" (जो लिंक घटक को नीचे पारित किया जाएगा) के 'में' के लिए मार्ग पथ को पारित करने की आवश्यकता है। इस तरह आपको किसी भी शैली को जोड़ने की आवश्यकता नहीं है क्योंकि यह MenuItem शैली का उपयोग करेगा

Comments

2019 में आपका जवाब निश्चित रूप से होना चाहिए।

— पाब्लो अनाया

ऊपर दिए गए जवाबों की तुलना में यह एक बेहतर उपाय है।

— मार्टिन न्यूक

यह निश्चित रूप से पोस्ट किए गए लोगों का सबसे अच्छा समाधान है

— रॉयल

यह डॉक्स की तुलना में 100 गुना बेहतर है, वे बहुत सारे बेकार कोड

— कॉइसो

अन्य सभी उत्तर मुझे डराते हैं

— coiso

Answer 4

लिंक की स्टाइलिंग को ठीक से हटाने का एक और तरीका भी है। आपको इसकी शैली देनी होगी textDecoration='inherit'और color='inherit'आप या तो स्टाइल को लिंक टैग की तरह जोड़ सकते हैं:

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

या इसे और सामान्य बनाने के लिए बस एक css क्लास बनाएं जैसे:

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

और फिर बस <Link className='text-link'>

Comments

क्या आपने मेरे समाधान का प्रयास किया है stackoverflow.com/a/55693040/3000540

— Daniele Urania

Answer 5

आप अंडरलाइन को हटाने के लिए 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> 

Answer 6

// सीएसएस

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

Answer 7

परमाणु दृष्टिकोण है जो आपके App.css (या समकक्ष) में है

a{
  text-decoration: none;
}

जो सभी <a>टैग के लिए रेखांकन को रोकता है जो इस समस्या का मूल कारण है

Comments

प्रतिक्रिया और स्टाइल-

— जेएसएक्स के

वास्तव में इसका एक समाधान यह मेरे लिए काम के रूप में मेरी प्रतिक्रिया के बगल में sass का उपयोग करते हुए और उपरोक्त सभी समाधानों का उपयोग नहीं करता था <लिंक> घटक शैली ..

— अहमद यूंज़

Answer 8

मेरे लिए काम करना, बस जोड़ना className="nav-link"औरactiveStyle{{textDecoration:'underline'}}

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

Answer 9

यहाँ देखो -> https://material-ui.com/guides/composition/#button ।

यह आधिकारिक सामग्री-उई गाइड है। शायद यह आपके लिए उपयोगी होगा क्योंकि यह मेरे लिए था।

हालाँकि, कुछ मामलों में, अंडरलाइन होता रहता है और आप टेक्स्ट-डेकोरेशन का उपयोग करना चाहते हैं: उसके लिए "कोई नहीं"। अधिक क्लीनर दृष्टिकोण के लिए, आप सामग्री-यूआई / कोर से मेक स्टाइल का आयात और उपयोग कर सकते हैं।

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

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

const classes = useStyles();

और फिर अपने JSX कोड में className विशेषता को {classes.menu-btn} पर सेट करें।

Comments

मुझे पता है कि तुम उस साल बाद मैं इस जवाब की जरूरत है मुझे पता था, धन्यवाद!

— kbreezy04

Answer 10

@ ग्रगुर के उत्तर पर विस्तार करने के लिए , यदि आप अपने निरीक्षक को देखते हैं, तो आप पाएंगे कि Linkघटकों का उपयोग करने से उन्हें पूर्व निर्धारित रंग मान मिलता है color: -webkit-link। textDecorationयदि आप इसे डिफ़ॉल्ट हाइपरलिंक की तरह नहीं देखना चाहते हैं तो आपको इसके साथ ओवरराइड करना होगा।

Answer 11

style={{ backgroundImage: "none" }}

केवल इसने मेरे लिए काम किया

Answer 12

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

Answer 13

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

कुछ मामलों में जब Gatsby घटक के अंदर किसी अन्य घटक का उपयोग करते <Link>हैं, तो आंतरिक घटक के divसाथ जोड़कर display: 'inline-block', उदाहरण में 'पृष्ठ' को रेखांकित करने से रोकता है।

Answer 14

यदि कोई व्यक्ति material-uiलिंक घटक की तलाश में है। बस संपत्ति जोड़ें underlineऔर इसे किसी को भी सेट न करें

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

Answer 15

मैंने आपकी तरह एक समस्या का समाधान किया है। मैंने फ़ायरफ़ॉक्स में तत्व का निरीक्षण करने की कोशिश की। मैं आपको कुछ परिणाम दिखाऊंगा:

1. यह केवल वह तत्व है जिसका मैंने निरीक्षण किया है। "लिंक" घटक "ए" टैग में परिवर्तित हो जाएगा, और "प्रॉप्स" को "हाइपर" संपत्ति में बदल दिया जाएगा:

2. और जब मैं इसमें टिकता हूँ: hov और विकल्प: hover और यहाँ परिणाम है:

जैसा कि आप देखते हैं: हॉवर में टेक्स्ट-डेकोरेशन है: रेखांकित करें। मैं केवल अपनी सीएसएस फ़ाइल में जोड़ता हूं:

a:hover {
 text-decoration: none;
}

और समस्या हल हो गई है। लेकिन मैंने टेक्स्ट-डेकोरेशन भी सेट किया है: कुछ अन्य वर्गों (जैसे: डी) में से कोई भी, जो कुछ प्रभाव डाल सकता है (मुझे लगता है)।

Answer 16

मेरे लिए क्या काम किया है:

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

Comments

क्या आपने मेरा समाधान आजमाया है? stackoverflow.com/a/55693040/3000540

— डेनियल यूरेनिया