简体   繁体   中英

Remove underline from <Link> tags Javascript

I would like to remove the underline from the link tag. If their is a function or method I will be very greatful for help. None of the other methods have worked and the other documentation has not helped.

强调

import clsx from 'clsx';
import React from 'react';
import Link from '@docusaurus/Link';
import styles from './HomepageLanguages.module.css';

const LanguageList = require('../_languages_.json');

const Language = (lang) => {
  const imgPath = require(`../../assets/languages/${lang.path}.png`).default;
  return (
    <div className={clsx('col col--3')} key={lang.path}>
      <div className={styles.languageItem} style={{ backgroundColor: lang.color }}>
        <div className={styles.languageImage}>
          <img src={imgPath} />
        </div>
        <div className={styles.languageInfo}>
          <div className='meta'>
            <h3>
              <Link to={`/docs/${lang.path}/intro`}>{lang.label}</Link>
            </h3>
            <p>{lang.defs}+ definitions</p>
          </div>
          <Link to={`/docs/${lang.path}/intro`}>See All &raquo;</Link>
        </div>
      </div>
    </div>
  );
};

export default () => {
  return (
    <div className={clsx(styles.homepageLanguages, 'text--left')}>
      <div className={styles.flex}>
        <h2 className={styles.flexLeft}>
          Programming Languages
        </h2>
        <div className={clsx(styles.flexRight, styles.homepageLanguageLink)}>
          <Link to='docs/what-is-devtionary'>See All &raquo;</Link>
        </div>
      </div>
      <div className='row'>
        {LanguageList.map(Language)}
      </div>
    </div>
  );
};

Hi yes as mentioned by @Milosh N. the solution is to use the text-decoration: none css property. Look at an example implemented in codesanbox.

DEMO https://codesandbox.io/s/priceless-kowalevski-00ocg?file=/src/pages/index.js

import React from "react";
import Link from "@docusaurus/Link";

function HomepageHeader() {
  const style = {
    color: "blue",
    textDecoration: "none"
  };

  return (
    <div>
      <h1>
        <Link style={style} to="/">
          Link
        </Link>{" "}
        <br />
        <Link to="/">Link normal</Link>
      </h1>
    </div>
  );
}

export default function Home() {
  return <HomepageHeader />;
}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM