有没有办法装饰'react-router-dom'的链接元素中的文本？答案

【问题标题】：Is there a way to decorate the text within the Link element of 'react-router-dom'?有没有办法装饰'react-router-dom'的链接元素中的文本？
【发布时间】：2021-01-25 18:07:09
【问题描述】：

我添加了样式属性来重置元素之间的文本样式。 'style={{textDecoration='none'}

function Navigation() {
    return (
        <div className="nav">
            <Link className='nav__btn' style={{ textDecoration: 'none' }} to='/'>Home</Link>
            <Link className='nav__btn' style={{ textDecoration: 'none' }} to="/about">About</Link>
        </div>);
}

我在css上写了如下代码。

.nav .nav__btn {
    text-decoration: none;
    background-color: transparent;
    color: white;
    font-size: 30px;
    font-style: italic;
    font-weight: bolder;
}

.nav .nav__btn:hover{
    transform: scale(1.1);
    color: orange;
    text-decoration: underline;
    transition: transform .35s;
}

鼠标悬停时字体颜色发生变化，但'text-decoration: underline'不起作用。

我认为发生了崩溃，但我不知道到底出了什么问题。有什么方法可以加下划线吗？

【问题讨论】：

标签： javascript css reactjs react-router-dom

【解决方案1】：

内联 CSS 的优先级高于外部 CSS

Priority of CSS Values For an HTML Document

您正在添加一个用于文本装饰的内联 CSS：

style={{ textDecoration: 'none' }}

然后尝试用您的外部 CSS 覆盖它，但没有效果，因为内联 CSS 比外部 CSS 具有更高的优先级，并且由于字体颜色没有任何其他 CSS 采用外部 CSS

【讨论】：