Link to="first">MenuItem style=paddingLeft: 13, textDecoration: "none"> Team 1 /MenuItem>Link>Thành phần MenuItem là tự http://www.material-ui.com/#/components/thực đơn

Bất kỳ ánh nhìn thâm thúy hoặc lý giải sẽ tiến hành reviews rất cao. Cảm ơn chúng ta trước.

Bạn đang xem: Bỏ gạch chân thẻ a


Tôi thấy nhiều người đang sử dụng những vẻ bên ngoài nội tuyến. textDecoration: "none"được sử dụng làm việc trẻ em, vào thực tiễn nó phải được thực hiện phía bên trong như vậy:

Link to="first" style= textDecoration: "none" > MenuItem style= paddingLeft: 13 >Team 1MenuItem>Link>về cơ bản sẽ trả về một thẻ chuẩn , sẽ là nguyên do tại sao Cửa Hàng chúng tôi vận dụng textDecorationnguyên tắc nghỉ ngơi đó.

Tôi hi vọng điều ấy vẫn giúp


Nó chuyển động :). Hãy chú ý rằng nếu bạn xào nấu dán phong phương pháp để .css của người sử dụng (chính vì, tất nhiên, các bạn không thích hợp phong thái inline) sau đó làtext-decoration: none;

Nếu nhiều người đang sử dụng styled-components, bạn cũng có thể có tác dụng như sau:

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, &:links, &:active text-decoration: none; `;export default (props) => StyledLink ...props />;
Tôi nghĩ rằng biện pháp tốt nhất có thể nhằm áp dụng Liên kết react-router-dom trong MenuItem (với yếu tắc MaterialUI không giống chẳng hạn như những nút) là gửi Liên kết vào phần cung ứng "thành phần"

Menu> MenuItem component=Link to="/first">Team 1MenuItem> MenuItem component=Link to="/second">Team 2MenuItem>Menu>bạn cần phải chuyển băng thông tuyến đường trong phần cung cấp "đến" của "MenuItem" (sẽ tiến hành đưa mang lại thành phần Liên kết). Bằng phương pháp này, chúng ta ko phải thêm bất kỳ hình dáng nào bởi nó đang sử dụng thứ hạng MenuItem


— Daniele Urania mối cung cấp
7
Của các bạn chắc chắn là đang là câu trả lời vào năm 2019.
— Pablo Anaya
4
Đây là một chiến thuật xuất sắc hơn những câu vấn đáp sinh sống bên trên.
— Martin Nuc
Đây chắc chắn là chiến thuật tốt nhất trong số gần như chiến thuật được đăng
— royalaid
Như vậy tốt hơn 100 lần đối với tư liệu, bọn họ thích thú không ít mã vô dụng
— coiso
Tất cả các câu trả lời khác có tác dụng tôi sợ
— coiso
30

Cũng tất cả một bí quyết khác nhằm đào thải đúng vẻ bên ngoài của liên kết. Quý khách hàng phải tạo lập kiểu dáng cho nó textDecoration="inherit"và color="inherit"bạn có thể thêm số đông hình trạng đó có tác dụng kiểu vào thẻ liên kết như:

Link style= color: "inherit", textDecoration: "inherit">hoặc để làm đến nó tổng quát rộng, chỉ cần tạo thành một tấm css như:

.text-liên kết color: inherit; text-decoration: inherit;Và tiếp đến chỉ


— Panos mối cung cấp
Quý Khách đã thử giải pháp của tôi stackoverflow.com/a/55693040/3000540
— Daniele Urania
9

Bạn có thể thêm nguyên tố style= textDecoration: "none" của bản thân mình Linknhằm xóa gạch men bên dưới. Quý khách hàng cũng có thể thêm nhiều hơn thế nữa cssvào stylekhối ví dụ style= textDecoration: "none", color: "white" .

h1> Link style= textDecoration: "none", color: "white" to="/getting-started"> Get Started Link>h1>
— Shubsay mê Verma mối cung cấp
5
// CSS

.navigation_bar > ul > li list-style: none; display: inline; margin: 2%; .liên kết text-decoration: none; // JSX

div className="navigation_bar"> ul key="nav"> li> Link className="link" to="/"> trang chủ Link> li> ul> div>
— Kushal Atreya mối cung cấp
5
Có giải pháp tiếp cận phân tử nhân vào App.css của khách hàng (hoặc đối tác)

a text-decoration: none;ngăn chặn gạch ốp chân cho tất cả những thẻ, đó là nguim nhân nền tảng gốc rễ của sự việc này


— Dave Pile nguồn
Không nên là phương án cho bội nghịch ứng cùng kiểu-jsx…
— AntonAL
Thực tế thì đây là một chiến thuật nó thao tác cho tôi như yên thực hiện sass bên cạnh phản ứng của mình với sử dụng tất cả những giải pháp bên trên ko kích hoạt thứ hạng yếu tắc ..
— Ahmed Younes
4

Làm việc cho tôi, chỉ việc thêm className="nav-link"vàactiveStyletextDecoration:"underline"

NavLink className="nav-link" to="/" exact activeStyle= textDecoration:"underline">My RecordNavLink>
— vuvo mối cung cấp
2
Xem trên đây -> https://material-ui.com/guides/composition/#button .

Đây là phía dẫn chấp thuận về đồ gia dụng liệu-ui. Có lẽ nó vẫn có ích cho mình cũng tương tự đến tôi.

Tuy nhiên, trong một vài ngôi trường hợp, gạch chân vẫn tồn tại với chúng ta có thể ước ao sử dụng trang trí văn uống bản: "none" đến điều ấy. Để bao gồm cách tiếp cận rõ ràng hơn, bạn cũng có thể nhập cùng thực hiện makeStyles trường đoản cú material-ui / core.

import makeStyles from "
material-ui/core";const useStyles = makeStyles(() => ( menu-btn: textDecoration: "none", ,));const classes = useStyles();Và kế tiếp đặt ở trong tính className thành class.menu-btn vào mã JSX của công ty.


— Abishek Ilango mối cung cấp
Tôi vẫn cho mình biết vào khoảng thời gian sau, đó là câu vấn đáp tôi nên, cảm ơn!
— kbreezy04,
1

Để mở rộng câu trả lời của
Grgur , nếu như bạn quan sát vào trình chất vấn của bản thân mình, bạn sẽ thấy rằng vấn đề sử dụng Linknhững nguyên tố đem đến cho chúng quý giá color đặt trước color: -webkit-link. quý khách đã phải ghi đtrần vấn đề này với textDecorationnếu bạn không thích nó trông y hệt như một siêu link mặc định.

*


— HẻmOOPhường nguồn
1

style= backgroundImage: "none" Chỉ điều đó làm việc mang lại tôi


— tudorprodan nguồn
1

a:-webkit-any-liên kết text-decoration: none; color: inherit;
— Enravel nguồn
0
Link to="/page"> Box sx= display: "inline-block" > PLink variant="primary">PagePLink> Box>Link>Trong một số trong những trường phù hợp khi thực hiện một nhân tố khác phía bên trong yếu tắc Gatsby , Việc thêm vết divvới display: "inline-block"xung quanh yếu tố bên trong sẽ ngăn chặn vấn đề gạch ốp chân (của "Trang" vào ví dụ).


— servrox nguồn
0

Nếu ai kia đã search kiếm material-uinguyên tố Liên kết của. Chỉ bắt buộc thêm thuộc tính underlinevới đặt nó thành ko có

...

Xem thêm: Đánh Giá Xe Audi A9 Giá Bao Nhiêu ? Hình Ảnh Thiết Kế & Khả Năng Vận Hành


— bạn mdanish mối cung cấp
0

Tôi đang xử lý một vấn đề có thể y như của công ty. Tôi vẫn nỗ lực khám nghiệm thành phần trong firefox. Tôi vẫn cho mình thấy một số kết quả:

Nó chỉ với yếu tố tôi sẽ kiểm soát. Thành phần "Liên kết" sẽ tiến hành chuyển đổi thành thẻ "a" và đạo cố kỉnh "thành" sẽ được biến đổi thành thuộc tính "href":

*

Và Khi tôi ghi lại vào: hov và option: hover và đấy là kết quả:

*

Nlỗi các bạn thấy: di con chuột bao gồm vnạp năng lượng bản-trang trí: gạch men chân. Tôi chỉ phân phối tệp css của mình:

a:hover text-decoration: none;cùng vụ việc được giải quyết. Nhưng tôi cũng tùy chỉnh trang trí văn uống bản: không có trong một số trong những lớp không giống (nhỏng bạn: D), điều đó hoàn toàn có thể tạo ra một số hiệu ứng (tôi đoán).


— Dong Nguyen Van nguồn
-1

Điều thao tác đến tôi là:

Link to="/" style=boxShadow: "none">
— Alex Mireles mối cung cấp
1
các bạn đã từng phương án của tôi chưa? stackoverflow.com/a/55693040/3000540
— Daniele Urania
khi sử dụng trang web của công ty chúng tôi, bạn xác nhận rằng bạn vẫn đọc và phát âm Chính sách cookie cùng Chính sách bảo mật thông tin của Cửa Hàng chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.