在以下代码中使用样式化组件库来设置链接样式的最佳方式是什么。 我可以找到很多使用 anchor 标记的示例,但没有一个使用 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;
`;
谢谢约瑟夫·沙纳汉
关于javascript - 使用 styled-components 设置路由器链接的样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59288849/