আমার নিম্নলিখিতগুলি রয়েছে:
আমি কীভাবে নীল আন্ডারলাইন থেকে মুক্তি পাব? কোডটি নীচে রয়েছে:
<Link to="first"><MenuItem style={{paddingLeft: 13, textDecoration: 'none'}}> Team 1 </MenuItem></Link>মেনুআইটিম উপাদানটি http://www.matory-ui.com/#/compferences/menu থেকে
যে কোনও অন্তর্দৃষ্টি বা দিকনির্দেশনা প্রশংসিত হবে। তুমাকে অগ্রিম ধন্যবাদ.
উত্তর:
আমি দেখছি আপনি ইনলাইন স্টাইল ব্যবহার করছেন। textDecoration: 'none'শিশুতে ব্যবহৃত হয়, যেখানে এটি ভিতরে ব্যবহার করা উচিত <Link>:
<Link to="first" style={{ textDecoration: 'none' }}>
<MenuItem style={{ paddingLeft: 13 }}>Team 1</MenuItem>
</Link><Link>মূলত একটি স্ট্যান্ডার্ড <a>ট্যাগ প্রদান করবে, যার কারণে আমরা textDecorationসেখানে নিয়ম প্রয়োগ করি।
আমি আশা করি এটি সাহায্য করবে
text-decoration: none;
আপনি যদি ব্যবহার করে থাকেন তবে আপনি 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} />;আমি মনে করি একটি মেনু আইটেমের (এবং অন্যান্য ম্যাটারিয়ালআইআই উপাদান যেমন বোতামগুলির) রিঅ্যাক্ট-রাউটার-ডোম লিঙ্কটি ব্যবহার করার সর্বোত্তম উপায়টি হল "উপাদান" প্রোপটিতে লিঙ্কটি পাস করা is
<Menu>
<MenuItem component={Link} to={'/first'}>Team 1</MenuItem>
<MenuItem component={Link} to={'/second'}>Team 2</MenuItem>
</Menu>আপনাকে "মেনুআইটিম" এর প্রবাহের 'থেকে' প্রান্তের রুট পথটি পাস করতে হবে (যা লিঙ্ক উপাদানটিতে চলে যাবে)। এইভাবে আপনার কোনও স্টাইল যুক্ত করার দরকার নেই কারণ এটি মেনু আইটেম স্টাইল ব্যবহার করবে
লিঙ্কটির স্টাইলিং সঠিকভাবে অপসারণ করার আরও একটি উপায় রয়েছে। আপনাকে এর স্টাইল দিতে হবে textDecoration='inherit'এবং color='inherit'আপনি হয় স্টাইলিং হিসাবে লিঙ্ক ট্যাগ এ যুক্ত করতে পারেন:
<Link style={{ color: 'inherit', textDecoration: 'inherit'}}>বা এটিকে আরও সাধারণ করার জন্য কেবল একটি সিএসএস শ্রেণি তৈরি করুন:
.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> // সিএসএস
.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>এই সমস্যার মূল কারণ হ'ল সমস্ত ট্যাগের আন্ডারলাইন প্রতিরোধ করে
এখানে দেখুন -> https://matory-ui.com/guides/composition/#button ।
এটি সরকারী উপাদান-ইউআই গাইড। এটি আমার পক্ষে যেমনটি ছিল তেমন কার্যকর হবে।
যাইহোক, কিছু ক্ষেত্রে আন্ডারলাইন অব্যাহত থাকে এবং আপনি পাঠ্য-সজ্জাটি ব্যবহার করতে চাইতে পারেন: "এর জন্য কোনও কিছুই নয়"। আরও পরিচ্ছন্ন পদ্ধতির জন্য, আপনি উপাদান-ইউআই / কোর থেকে মেক স্টাইলগুলি আমদানি করতে এবং ব্যবহার করতে পারেন।
import { makeStyles } from '@material-ui/core';
const useStyles = makeStyles(() => ({
menu-btn: {
textDecoration: 'none',
},
}));
const classes = useStyles();এবং তারপরে আপনার জেএসএক্স কোডগুলিতে N শ্রেণি.মেনু-বিটিএন। এ শ্রেণীর নাম বৈশিষ্ট্যটি সেট করুন।
@ গ্রাগুরের উত্তরটি প্রসারিত করতে , আপনি যদি আপনার পরিদর্শকের দিকে নজর দেন তবে আপনি দেখতে পাবেন যে Linkউপাদানগুলি তাদের ব্যবহার করে প্রিসেটের রঙ দেয় color: -webkit-link। আপনি textDecorationযদি এটি ডিফল্ট হাইপারলিংকের মতো দেখতে না চান তবে আপনার এটির পাশাপাশি ওভাররাইড করতে হবে।
style={{ backgroundImage: "none" }}এটি কেবল আমার জন্য কাজ করেছিল
<Link to="/page">
<Box sx={{ display: 'inline-block' }}>
<PLink variant="primary">Page</PLink>
</Box>
</Link>যখন Gatsby ভিতরে আরেকটি উপাদান ব্যবহার কিছু কিছু ক্ষেত্রে <Link>উপাদান, একটি যোগ divদিয়ে display: 'inline-block'ভেতরের উপাদান চারপাশে, প্রতিরোধ (উদাহরণস্বরূপ এর 'পৃষ্ঠা') নিম্নরেখাঙ্কিত।
আমি আপনার মতো সমস্যার সমাধান করেছি। আমি ফায়ার ফক্সে উপাদানটি পরিদর্শন করার চেষ্টা করেছি। আমি আপনাকে কিছু ফলাফল দেখাব:
আপনি যেমনটি দেখতে পান: হওয়ারের পাঠ্য-সজ্জা রয়েছে: আন্ডারলাইন। আমি কেবল আমার সিএসএস ফাইলে যুক্ত করছি:
a:hover {
text-decoration: none;
}এবং সমস্যা সমাধান করা হয়। তবে আমি পাঠ্য-সজ্জাটিও সেট করেছি: অন্য কোনও শ্রেণিতে কেউ নেই (আপনার মতো: ডি), এটি কিছু প্রভাব ফেলতে পারে (আমার ধারণা)।
আমার জন্য যা কাজ করেছে তা হ'ল:
<Link to="/" style={{boxShadow: "none"}}>
textDecoration: 'none'উপর<Link />উপাদান না তার সন্তানদের।