কীভাবে প্রতিক্রিয়া রাউটারের লিঙ্ক উপাদানটির জন্য আন্ডারলাইন থেকে মুক্তি পাবেন?


121

আমার নিম্নলিখিতগুলি রয়েছে:

এখানে চিত্র বর্ণনা লিখুন

আমি কীভাবে নীল আন্ডারলাইন থেকে মুক্তি পাব? কোডটি নীচে রয়েছে:

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

মেনুআইটিম উপাদানটি http://www.matory-ui.com/#/compferences/menu থেকে

যে কোনও অন্তর্দৃষ্টি বা দিকনির্দেশনা প্রশংসিত হবে। তুমাকে অগ্রিম ধন্যবাদ.


7
করা textDecoration: 'none'উপর <Link />উপাদান না তার সন্তানদের।
আজিয়াম

উত্তর:


159

আমি দেখছি আপনি ইনলাইন স্টাইল ব্যবহার করছেন। textDecoration: 'none'শিশুতে ব্যবহৃত হয়, যেখানে এটি ভিতরে ব্যবহার করা উচিত <Link>:

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

<Link>মূলত একটি স্ট্যান্ডার্ড <a>ট্যাগ প্রদান করবে, যার কারণে আমরা textDecorationসেখানে নিয়ম প্রয়োগ করি।

আমি আশা করি এটি সাহায্য করবে


2
টেক্সটেকচারের সাথে বিশ্বব্যাপী সেট করার কোন উপায় নেই? app.css এ?
স্ট্যাকডেভ

3
এটি কাজ করে :)। সচেতন হতে হবে যে আপনি আপনার সিএসএস শৈলী পেস্ট (কারণ অবশ্যই, আপনি ইনলাইন শৈলী মত না) তারপর কপি যদিtext-decoration: none;
ডেভিড টরেস

63

আপনি যদি ব্যবহার করে থাকেন তবে আপনি 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} />;

61

আমি মনে করি একটি মেনু আইটেমের (এবং অন্যান্য ম্যাটারিয়ালআইআই উপাদান যেমন বোতামগুলির) রিঅ্যাক্ট-রাউটার-ডোম লিঙ্কটি ব্যবহার করার সর্বোত্তম উপায়টি হল "উপাদান" প্রোপটিতে লিঙ্কটি পাস করা is

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

আপনাকে "মেনুআইটিম" এর প্রবাহের 'থেকে' প্রান্তের রুট পথটি পাস করতে হবে (যা লিঙ্ক উপাদানটিতে চলে যাবে)। এইভাবে আপনার কোনও স্টাইল যুক্ত করার দরকার নেই কারণ এটি মেনু আইটেম স্টাইল ব্যবহার করবে


7
আপনার অবশ্যই 2019 এ উত্তর হওয়া উচিত
পাবলো আনায়া

4
এটি উপরের উত্তরের চেয়ে ভাল সমাধান।
মার্টিন নিউ

এটি অবশ্যই পোস্ট করা সর্বোত্তম সমাধান
রোয়ালাইদ

এটি ডক্সের চেয়ে 100 গুণ ভাল, তারা প্রচুর অকেজো কোড
লোভ করে

অন্যান্য সমস্ত উত্তর আমাকে ভয়
দেখায়

30

লিঙ্কটির স্টাইলিং সঠিকভাবে অপসারণ করার আরও একটি উপায় রয়েছে। আপনাকে এর স্টাইল দিতে হবে textDecoration='inherit'এবং color='inherit'আপনি হয় স্টাইলিং হিসাবে লিঙ্ক ট্যাগ এ যুক্ত করতে পারেন:

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

বা এটিকে আরও সাধারণ করার জন্য কেবল একটি সিএসএস শ্রেণি তৈরি করুন:

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

এবং তারপর ঠিক <Link className='text-link'>



9

আন্ডারলাইন সরানোর জন্য 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> 

5

// সিএসএস

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

5

আপনার App.css এ থাকা পারমাণবিক পন্থা রয়েছে (বা প্রতিপক্ষ)

a{
  text-decoration: none;
}

যা <a>এই সমস্যার মূল কারণ হ'ল সমস্ত ট্যাগের আন্ডারলাইন প্রতিরোধ করে


প্রতিক্রিয়া এবং স্টাইলড-জেএসএক্সের সমাধান নয় ...
আন্তোনাল

আসলে এটি একটি সমাধান যা আমার পক্ষে আমার প্রতিক্রিয়াটির পাশে স্যাস ব্যবহার করে এবং উপরের সমস্ত সমাধান ব্যবহার করে <লিঙ্ক> উপাদান স্টাইলটি ট্রিগার করে নি এটি আমার জন্য কাজ করেছিল
আহমেদ ইউনেস

4

আমার জন্য কাজ করা, শুধু যুক্ত className="nav-link"এবংactiveStyle{{textDecoration:'underline'}}

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

2

এখানে দেখুন -> https://matory-ui.com/guides/composition/#button

এটি সরকারী উপাদান-ইউআই গাইড। এটি আমার পক্ষে যেমনটি ছিল তেমন কার্যকর হবে।

যাইহোক, কিছু ক্ষেত্রে আন্ডারলাইন অব্যাহত থাকে এবং আপনি পাঠ্য-সজ্জাটি ব্যবহার করতে চাইতে পারেন: "এর জন্য কোনও কিছুই নয়"। আরও পরিচ্ছন্ন পদ্ধতির জন্য, আপনি উপাদান-ইউআই / কোর থেকে মেক স্টাইলগুলি আমদানি করতে এবং ব্যবহার করতে পারেন।

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

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

const classes = useStyles();

এবং তারপরে আপনার জেএসএক্স কোডগুলিতে N শ্রেণি.মেনু-বিটিএন। এ শ্রেণীর নাম বৈশিষ্ট্যটি সেট করুন।


অনুভূত আমি আপনাকে জানাতে চাই যে বছর পরে এই আমার উত্তর প্রয়োজন ছিল, ধন্যবাদ!
kbreezy04

1

@ গ্রাগুরের উত্তরটি প্রসারিত করতে , আপনি যদি আপনার পরিদর্শকের দিকে নজর দেন তবে আপনি দেখতে পাবেন যে Linkউপাদানগুলি তাদের ব্যবহার করে প্রিসেটের রঙ দেয় color: -webkit-link। আপনি textDecorationযদি এটি ডিফল্ট হাইপারলিংকের মতো দেখতে না চান তবে আপনার এটির পাশাপাশি ওভাররাইড করতে হবে।

এখানে চিত্র বর্ণনা লিখুন


1
style={{ backgroundImage: "none" }}

এটি কেবল আমার জন্য কাজ করেছিল



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

যখন Gatsby ভিতরে আরেকটি উপাদান ব্যবহার কিছু কিছু ক্ষেত্রে <Link>উপাদান, একটি যোগ divদিয়ে display: 'inline-block'ভেতরের উপাদান চারপাশে, প্রতিরোধ (উদাহরণস্বরূপ এর 'পৃষ্ঠা') নিম্নরেখাঙ্কিত।


0

যদি কেউ material-uiএর লিঙ্ক উপাদানটি খুঁজছেন । কেবল সম্পত্তি যুক্ত করুন underlineএবং এটিকে কোনওটিতে সেট করবেন না

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


0

আমি আপনার মতো সমস্যার সমাধান করেছি। আমি ফায়ার ফক্সে উপাদানটি পরিদর্শন করার চেষ্টা করেছি। আমি আপনাকে কিছু ফলাফল দেখাব:

  1. আমি পরিদর্শন করেছি এমন উপাদান এটিই। "লিঙ্ক" উপাদানটি "একটি" ট্যাগে রূপান্তরিত হবে, এবং "থেকে" প্রপসগুলি "href" বৈশিষ্ট্যে রূপান্তরিত হবে:

  1. এবং আমি যখন এঁকেছি: hov এবং বিকল্প: হোভার এবং এখানে ফলাফল:

আপনি যেমনটি দেখতে পান: হওয়ারের পাঠ্য-সজ্জা রয়েছে: আন্ডারলাইন। আমি কেবল আমার সিএসএস ফাইলে যুক্ত করছি:

a:hover {
 text-decoration: none;
}

এবং সমস্যা সমাধান করা হয়। তবে আমি পাঠ্য-সজ্জাটিও সেট করেছি: অন্য কোনও শ্রেণিতে কেউ নেই (আপনার মতো: ডি), এটি কিছু প্রভাব ফেলতে পারে (আমার ধারণা)।


আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.