reactjs - Styling <Link> component from React-router-dom, doesnt work with styled components

Question

import React, from "react";
import styled from "styled-components";
import { Link } from "react-router-dom";


const StyledLink = styled(Link)`
  text-decoration: none;
  cursor: pointer;
  color: black;
  font-size: 14px;
  line-height: 22px;
  font-weight: 60";
  color: #393e46;
  letter-spacing: .01em;
`;


const App = () => {
 return <StyledLink>some text</StyledLink>
}

export default App;

I'm trying to style the Link component from react-router-dom with Styled components syntax, but it breaks my whole app and it does not work as intented.

question from:https://stackoverflow.com/questions/65919322/styling-link-component-from-react-router-dom-doesnt-work-with-styled-componen

Answer 1

Inside the Link component, there is an a tag, you need to style her:

styled(Link)`
 a {
   your style here
 }
`