如何洗掉未選擇路線的NavLink樣式-有解無憂

我想知道如何恢復到下面螢屏截圖中標記的 NavLink 的默認樣式。本color應為白色，無下劃線。您會在螢屏截圖下方找到我的代碼：Home 是當前選擇的默認路徑。對此的 activeClass 屬性正在正常作業。

如何洗掉未選擇路線的 NavLink 樣式

編碼：

const NavBar = () => {
    return(
        <div className="navBar">
            <div className="logo">LOGO</div>
            <div className="navOptions">
                <ul>
                    <li>
                        <NavLink exact activeClassName="activeClass" to="/">Home</NavLink>
                    </li>
                    <li>
                        <NavLink exact activeClassName="activeClass" to="/advanceFilter">Advanced Search</NavLink>
                    </li>
                    <li>
                        <NavLink exact activeClassName="activeClass" to="viewAll">View All</NavLink>
                    </li>
                    <li>Logout</li>
                </ul>
            </div>
        </div>
    );
}

export default NavBar;

CSS：

.navBar {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    color: white;
    font-weight: bold;
}

.logo {
    display: flex;
    flex: 1;
    align-items: center;
    padding-left: 50px;
}

.navOptions {
    display: flex;
    justify-content: flex-end;
    flex: 1;
    height: 100%;
}

//The li items don't have the color and text-decoration properties on them
li {
    display: inline;
    margin-right: 20px;
    cursor: pointer;
    height: 100%;
    text-decoration: none;
    color: white;
}

li:hover {
    background-color: gray;
}

ul {
    margin-right: 40px;
    list-style-type: none;
}

.activeClass {
    text-decoration: none;
    color: purple;
}

uj5u.com熱心網友回復：

該NavLink組件呈現一個錨<a />標記，更新 CSS 中的選擇器以同時定位作為li元素子元素的錨標記。

li, li a {
  display: inline;
  margin-right: 20px;
  cursor: pointer;
  height: 100%;
  text-decoration: none;
  color: white;
}

如何洗掉未選擇路線的 NavLink 樣式

或者，您也可以指定一個“navlink”類并在那里應用默認的非活動 CSS 樣式。

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/370882.html

標籤：css 反应反应路由器-dom

上一篇：使用CreateReactApp更改背景圖片

下一篇：反應useEffect鉤子和eslint警告