html - 如何使用 css 定位 NavLink 组件？

Question

我想让 NavLink 在 React 中应用 CSS 样式。但我不能定位 NavLink。
代码:

.navUl li NavLink {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

<nav className='myNavbar'>
                <ul className='navUl'>
                  <li>
                    <NavLink activeClassName='active' exact to="/">Function</NavLink>
                  </li>
                  <li>
                    <NavLink activeClassName='active' exact to="/class">Class</NavLink>
                  </li>
                  <li>
                    <NavLink activeClassName='active' exact to="/users">Logout</NavLink>
                  </li>
                </ul>
            </nav>

如何使用 css 定位 NavLink 组件？

Answer 1

如果您正在使用 styled-components然后

import styled from 'styled-components';

/* The First Method */
export const NavLink = styled.a`
  // your style goes here
`;

/* The Other Method */

const NavLink = styled.a`
  // your style goes here
`;

export default NavLink;

如果您使用的是 functional-components然后

export default function NavLink(...props) {
  return <a href="" {...props}> </a>
}

...props会让你拥有你想要的任何属性(property) <a href="" style="" className="" ...andMuchMore> </a>
如果只是 jsx然后它看起来像这样

<nav class="navbar">
  <a href="/home" className="nav-link"> Home </a>
  <a href="/about" className="nav-link"> About </a>
</nav>

我不使用 class components如此频繁，所以我不太了解它。