Làm Thế Nào Để Loại Bỏ Gạch Chân Thẻ A Với Thuộc Tính Box, Cách Bỏ Gạch Chân Link Trong Html Css
Link to=”first”>MenuItem style={{paddingLeft: 13, textDecoration: “none”}}> Team 1 /MenuItemvàgt;Linkvàgt;Thành phần MenuItem là từ http://www.material-ui.com/#/components/menu
Bất kỳ cái nhìn sâu sắc hoặc hướng dẫn sẽ được nhận xét rất cao. Cảm ơn bạn trước.
Bạn đang xem: Bỏ gạch chân thẻ a
Tôi thấy bạn đang sử dụng các kiểu nội tuyến. textDecoration: “none”được sử dụng ở trẻ em, trong thực tiễn nó nên được sử dụng bên trong như vậy:
Link to=”first” style={{ textDecoration: “none” }}> MenuItem style={{ paddingLeft: 13 }}>Team 1MenuItemvàgt;Linkvàgt;về cơ bản sẽ trả về một thẻ chuẩn , đó là nguyên nhân vì sao chúng tôi ứng dụng textDecorationquy tắc ở đó.
Tôi kì vọng điều đó sẽ giúp
Nó hoạt động :). Hãy lưu ý rằng nếu bạn sao chép dán phong phương pháp để .css của bạn (bởi vì, tất nhiên, bạn không thích phong thái inline) sau đó làtext-decoration: none;
Nó hoạt động :). Hãy lưu ý rằng nếu bạn sao chép dán phong phương pháp để .css của bạn (bởi vì, tất nhiên, bạn không thích phong thái inline) sau đó làtext-decoration: none;
Nếu bạn đang sử dụng styled-components, bạn có thể làm 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, &:link, &:active { text-decoration: none; }`;export default (props) => StyledLink {…props} />;
Tôi nghĩ rằng cách tốt nhất để sử dụng Link react-router-dom trong MenuItem (và thành phần MaterialUI khác ví dụ như các nút) là chuyển Link trong phần trợ giúp “thành phần”
Thực đơnvàgt; MenuItem component={Link} to={“/first”}>Team 1MenuItemvàgt; MenuItem component={Link} to={“/second”}>Team 2MenuItemvàgt;Thực đơnvàgt;bạn cần phải chuyển đường dẫn tuyến trong phần trợ giúp “đến” của “MenuItem” (sẽ được chuyển đến thành phần Link). Bằng phương pháp này, bạn không cần thêm bất kỳ kiểu nào vì nó sẽ sử dụng kiểu MenuItem
— Daniele Urania nguồn
7
Của bạn chắc cú sẽ là câu trả lời vào năm 2019.
— Pablo Anaya
4
Đây là một phương án tốt hơn các câu trả lời ở trên.
— Martin Nuc
Đây chắc cú là phương án tốt nhất trong số những phương án được đăng
— royalaid
Điều này tốt hơn 100 lần so với tài liệu, họ yêu thích rất nhiều mã vô dụng
— coiso
Toàn bộ các câu trả lời khác làm tôi sợ
— coiso
30
— Daniele Urania nguồnCủa bạn chắc cú sẽ là câu trả lời vào năm 2019.— Pablo AnayaĐây là một phương án tốt hơn các câu trả lời ở trên.— Martin NucĐây chắc cú là phương án tốt nhất trong số những phương án được đăng— royalaidĐiều này tốt hơn 100 lần so với tài liệu, họ yêu thích rất nhiều mã vô dụng— coisoTất cả các câu trả lời khác làm tôi sợ— coiso30
Cũng có một cách khác để loại bỏ đúng kiểu của link. Bạn phải tạo kiểu cho nó textDecoration=”inherit”và color=”inherit”bạn có thể thêm những kiểu đó làm kiểu vào thẻ link như:
Link style={{ color: “inherit”, textDecoration: “inherit”}}>hoặc để làm cho nó tổng quát hơn, chỉ cần tạo một lớp css như:
.text-link { color: inherit; text-decoration: inherit;}Và sau đó chỉ
— Panos nguồn
Bạn đã thử phương án của tôi stackoverflow.com/a/55693040/3000540
— Daniele Urania
9
— Panos nguồnBạn đã thử phương án của tôi stackoverflow.com/a/55693040/3000540— Daniele Urania
Bạn có thể thêm thành phần style={{ textDecoration: “none” }}của mình Linkđể xóa gạch dưới. Bạn cũng có thể thêm nhiều hơn cssvào stylekhối ví dụ style={{ textDecoration: “none”, color: “white” }}.
h1vàgt; Link style={{ textDecoration: “none”, color: “white” }} to=”/getting-started”> Get Started Linkvàgt;h1vàgt;
— Shubham Verma nguồn
5
// CSS
.navigation_bar > ul > li { list-style: none; display: inline; margin: 2%; } .link { text-decoration: none; }// JSX
div className=”navigation_bar”> ul key=”nav”> livàgt; Link className=”link” to=”/”> Home Linkvàgt; livàgt; ulvàgt; divvàgt;
— Kushal Atreya nguồn
5
Có cách tiếp cận hạt nhân trong App.css của bạn (hoặc partners)
a{ text-decoration: none;}ngăn chặn gạch chân cho toàn bộ các thẻ, đây là nguyên nhân gốc rễ của vấn đề này
— Dave Pile nguồn
Không phải là phương án cho phản ứng và kiểu-jsx…
— AntonAL
Thực tiễn thì đây là một phương án nó làm việc cho tôi như im sử dụng sass bên cạnh phản ứng của tôi và sử dụng toàn bộ các phương án trên không kích hoạt kiểu thành phần ..
— Ahmed Younes
4
— Dave Pile nguồnKhông phải là phương án cho phản ứng và kiểu-jsx…— AntonALThực tế thì đây là một phương án nó làm việc cho tôi như im sử dụng sass bên cạnh phản ứng của tôi và sử dụng toàn bộ các phương án trên không kích hoạt kiểu thành phần ..— Ahmed Younes
Làm việc cho tôi, chỉ cần thêm className=”nav-link”vàactiveStyle{{textDecoration:”underline”}}
NavLink className=”nav-link” to=”/” exact activeStyle= {{textDecoration:”underline”}}>My RecordNavLinkvàgt;
— vuvo nguồn
2
Xem tại đây -> https://material-ui.com/guides/composition/#button .
Đây là hướng dẫn chính thức về vật liệu-ui. Có vẻ nó sẽ hữu ích cho bạn cũng như cho tôi.
Tuy nhiên, trong một số trường hợp, gạch chân vẫn tồn tại và bạn có thể muốn sử dụng trang trí văn bản: “none” cho điều đó. Để có cách tiếp cận rõ ràng hơn, bạn có thể nhập và sử dụng makeStyles từ material-ui / core.
import { makeStyles } from “
material-ui/core”;const useStyles = makeStyles(() => ({ menu-btn: { textDecoration: “none”, },}));const classes = useStyles();Và sau đó đặt tính chất className thành {class.menu-btn} trong mã JSX của bạn.
— Abishek Ilango nguồn
Tôi sẽ cho bạn biết vào năm sau, đây là câu trả lời tôi cần, cảm ơn!
— kbreezy04,
1
— Abishek Ilango nguồnTôi sẽ cho bạn biết vào năm sau, đây là câu trả lời tôi cần, cảm ơn!— kbreezy04,
Để mở rộng câu trả lời của
Grgur , nếu bạn nhìn vào trình xác minh của mình, bạn sẽ thấy rằng việc sử dụng Linkcác thành phần mang lại cho chúng giá trị màu đặt trước color: -webkit-link. Bạn sẽ cần ghi đè điều này cùng với textDecorationnếu bạn không muốn nó trông giống như một siêu link mặc định.
— HẻmOOP nguồn
1
— HẻmOOP nguồn
style={{ backgroundImage: “none” }}Chỉ điều này làm việc cho tôi
— tudorprodan nguồn
1
— tudorprodan nguồn
a:-webkit-any-link { text-decoration: none; color: inherit;}
— Enravel nguồn
0
Link to=”/page”> Box sx={{ display: “inline-block” }}> PLink variant=”primary”>PagePLinkvàgt; Boxvàgt;Linkvàgt;Trong một số trường hợp khi sử dụng một thành phần khác bên trong thành phần Gatsby , việc thêm dấu divvới display: “inline-block”xung quanh thành phần bên trong sẽ ngăn chặn việc gạch chân (của “Trang” trong ví dụ).
— servrox nguồn
0
— servrox nguồn
Nếu ai đó đang tìm kiếm material-uithành phần Link của. Chỉ cần thêm tính chất underlinevà đặt nó thành không 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
— người mdanish nguồn
0
— người mdanish nguồn
Tôi đã khắc phục một vấn đề có thể giống như của bạn. Tôi đã phấn đấu xác minh phần tử trong firefox. Tôi sẽ cho bạn thấy một số kết quả:
Nó chỉ là yếu tố tôi đã xác minh. Thành phần “Liên kết” sẽ được chuyển hóa thành thẻ “a” và đạo cụ “thành” sẽ được chuyển hóa thành tính chất “href”:
Nó chỉ là yếu tố tôi đã xác minh. Thành phần “Liên kết” sẽ được chuyển hóa thành thẻ “a” và đạo cụ “thành” sẽ được chuyển hóa thành tính chất “href”:
Và khi tôi đánh dấu vào: hov và option: hover và đây là kết quả:
Như bạn thấy: di chuột có văn bản-trang trí: gạch chân. Tôi chỉ thêm vào tệp css của mình:
a:hover { text-decoration: none;}và vấn đề được khắc phục. Nhưng tôi cũng thiết lập trang trí văn bản: không có trong một số lớp khác (như bạn: D), điều đó có thể tạo ra một số hiệu ứng (tôi đoán).
— Dong Nguyen Van nguồn
-1
— Dong Nguyen Van nguồn-1
Điều làm việc cho tôi là:
Link to=”/” style={{boxShadow: “none”}}>
— Alex Mireles nguồn
1
bạn đã thử phương án của tôi chưa? stackoverflow.com/a/55693040/3000540
— Daniele Urania
Khi sử dụng website của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Quyết sách cookie và Quyết sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.
Link to=”/” style={{boxShadow: “none”}}>— Alex Mireles nguồnbạn đã thử phương án của tôi chưa? stackoverflow.com/a/55693040/3000540— Daniele UraniaKhi sử dụng website của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Quyết sách cookie và Quyết sách bảo mật của chúng tôi.Licensed under cc by-sa 3.0 with attribution required.
