我想让 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 组件?
最佳答案
如果您正在使用 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
如此频繁,所以我不太了解它。
关于html - 如何使用 css 定位 NavLink 组件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68780460/