Styling a Router Link with styled-components
Solution 1
Yes thanks for your help. A slimmed down version of what I will implement is as follows. It also has the advantage in that I did not have to implement an unordered list.
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;
`;
Thanks Joseph Shanahan
Solution 2
You are in the right way, but little wrong, instead of using ul
you just pass the component reference.
export default styled(Nav)`
color: white;
text-align: left;
background: teal;
width: 100%;
${Link} {
/* style for Link Component */
}
`;
Check this answer, it's very familiar.
Related videos on Youtube
Joseph Shanahan
I did mostly C# and GIS development. I have some ESRI Developer certifications on ArcGIS 10.1. Currently not is full time employment and I spend my days on linux developing PHP and NodeJS.
Updated on August 14, 2022Comments
-
Joseph Shanahan over 1 year
What is the best way to style the Link using the styled-components library in the code that follows. I can find lots of examples to work with anchor tag but none to work with react-router link. Am I going about the correct way.
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; } } `;
Thanks Joseph Shanahan