CODEWITHSUNDEEP
reactjsreact-routerstyled-components
Jane Petrovski
Jane Petrovski

Reputation: 11

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

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.

Upvotes: 1

Views: 934

Answers (1)

Gabriel Alc&#226;ntara
Gabriel Alc&#226;ntara

Reputation: 626

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

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

Upvotes: 1

Related Questions