NavLink 未按照 css 样式呈现子按钮答案

【问题标题】：NavLink is not rendering the child buttons as per the css stylingNavLink 未按照 css 样式呈现子按钮
【发布时间】：2020-05-21 14:15:36
【问题描述】：

我有一个名为 Header 的组件，它有 2 个 Navlink，分别用于添加和查看 2 个按钮。标头组件在整个应用程序中是通用的，已合并到 Approutes.js 中。由于某种原因，第二个按钮视图没有按照 css 样式呈现。

Approutes.js

import React from 'react';
import { BrowserRouter, Route, Switch } from "react-router-dom";
import Header from "./Header";
import Home from "./Home";
const Approutes = () => {
  return (
    <BrowserRouter>
      <div>
        <Header/>
        <Switch>
          <Route path="/" component={Home} exact={true} />
        </Switch>
      </div>
    </BrowserRouter>
  );
};

export default Approutes;

Home.js

从'react'导入反应，{组件}；

class  Home extends Component {

    render() { 
        return ( 
            <div className="home">
            </div>
         );
    }
}

export default Home;

Header.js:-

import { NavLink } from "react-router-dom";
import React, { Component } from "react";

class Header extends Component {

  render() {
    return (
      <div className="header">
        <div className="appTitle">
          <h1>NEW APP</h1>
        </div>
        <div className="navLinks">
          <NavLink
            to="/create"
            className="addBtn"
            activeClassName="activeButton"
          >
            ADD
          </NavLink>
          <NavLink
            to="/view"
            className="viewBtn"
            activeClassName="activeButton"
          >
            VIEW
          </NavLink>
        </div>
      </div>
    );
  }
}


export default Header;

CSS 文件：-

.home {
  width: 100vw;
  height: 100vh;
  margin:0;
  padding: 0;

}
.header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0vh;
  left: 3vw;
  border: 2px solid red;
}
.appTitle {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.navLinks {
  margin-top: 3vh;
  width: 95vw;
  border: 2px solid black

}

a:first-child {
  float: left;
}

.addBtn,.viewBtn {
  font-size: 1.5rem;
  height: 6vh;
  width: 47.5vw !important;
  text-decoration: none;
  text-align: center;
  background: skyblue;
  border-top-right-radius: 50px;
  letter-spacing: 1px;
  transition: all 280ms ease-out;
  text-decoration: none;
  outline: none;
  cursor: pointer;
}

.activeButton {
    background: lighten(rgba(7, 116, 241, 0.9), 10%);
    letter-spacing: 1.5px;
    font-size: 2.5rem;
    transition: all 280ms ease-in;
    color: white;
    width: 47.5vw !important;

  }

查看按钮错位：-

【问题讨论】：

标签： css reactjs react-router

【解决方案1】：

最有可能的问题在这里：

a:first-child {
  float: left;
}

默认情况下链接是内联元素（width 被忽略）。当你让它浮动时，它就变成了块元素（width 工作）。但是您仅将此应用于第一个链接。尝试将此部分替换为：

.navLinks a {
  float: left;
}

另外，链接有很多states。您可能需要为每个状态定义样式，即.viewBtn,.viewBtn:visited,.viewBtn:hover,.addBtnviewBtn:focus,.viewBtn:active,

【讨论】：

是的，这个很难捕捉。非常感谢。它现在可以正常工作了。