Apply styled component style to a third party components
You can simplify styles. No need to wrap a link with another component. Simple use styled-components
extending with styled()
function:
import React from "react";
import { NavLink } from "react-router-dom";
import styled from "styled-components";
const StyledNavLink = styled(NavLink)`
color: red;
margin: 10px;
`;
const Navigation = () => {
return (
<div>
<StyledNavLink to="/">Home</StyledNavLink>
<StyledNavLink to="/about">About</StyledNavLink>
<StyledNavLink to="/contact">Contact</StyledNavLink>
</div>
);
};
export default Navigation;
You should set style for a
Tag:
import React from "react";
import { NavLink } from "react-router-dom";
import styled from "styled-components";
const NavStyle = styled.div`
margin: 10px;
a {
color: red;
}
`;
const Navigation = () => {
return (
<div>
<NavStyle>
<NavLink to="/">Home</NavLink>
</NavStyle>
<NavLink to="/about">About</NavLink>
<NavLink to="/contact">Contact</NavLink>
</div>
);
};
export default Navigation;