javascript - 使用 styled-components 设置 Router Link 的样式
问题描述
在下面的代码中,使用 styled-components 库设置 Link 样式的最佳方法是什么。我可以找到很多使用锚标记的示例,但没有一个使用 react-router 链接的示例。我要走正确的路吗。
import React from "react";
import { Link } from "react-router-dom";
import styled from "styled-components";
const Nav = ({ className }) => {
return (
<div className={className}>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
</ul>
</div>
);
};
export default styled(Nav)`
color: white;
text-align: left;
background: teal;
width: 100%;
ul {
color: red;
display: flex;
flex-direction: row;
border: 1px solid green;
list-style: none;
li {
padding: 15px 15px;
border: 2px solid purple;
}
}
`;
谢谢约瑟夫·沙纳汉
解决方案
是的,谢谢你的帮助。我将实施的精简版本如下。它还有一个优点是我不必实现无序列表。
import React from "react";
import { Link } from "react-router-dom";
import styled from "styled-components";
const Nav = ({ className }) => {
return (
<div className={className}>
<NavLink to="/">Home</NavLink>
<NavLink to="/about">About</NavLink>
</div>
);
};
const NavLink = styled(Link)`
padding: 20px;
color: white;
text-decoration: none;
&:hover {
color: red;
background: blue;
}
`;
export default styled(Nav)`
color: white;
width: 100%;
display: flex;
justify-content: flex-end;
`;
谢谢约瑟夫·沙纳汉
推荐阅读
- flutter - 使用填充时,应用栏中的操作图标溢出
- go - golang 切片中哪种类型的大小为零?
- keras - 如何在 keras 训练批次后获得中间参数?
- r - 创建一个已定义的函数,该函数根据现有列在数据框中创建列
- javascript - 传递给生成器时的对象和数组解构并发症
- node.js - 在 Netlify 函数中获取简单 Fetch 的问题
- javascript - 如何在 JSON Schema 中使用“任何”类型?
- regex - VSCode:替换文本做数学
- sql - 在sql中合并和删除两个表
- google-cloud-platform - Google Cloud Functions 证书与域名不匹配