CODEWITHSUNDEEP
reactjsreact-routerstyled-components
Sammy
Sammy

Reputation: 3687

Making react-router link look like my default link

I use styled-components to style my default links as follows:

import styled from 'styled-components';
import {
  fontSize
} from 'styled-system';

const Link = a `
  ${fontSize};
  color: white;

  &:link {
    text-decoration: none;
  }
`;

export default Link;

I would like to use the exact same style for react-routers Link component. Should I be using css from styled-components or is there another way to do this?

Upvotes: 0

Views: 437

Answers (2)

Kopflaster
Kopflaster

Reputation: 14

You can style any react-component (like the react-router Link) by using parantheses:

const StyledLink = styled(Link)`
    color: red;
`;
See the documentation for more reference: https://www.styled-components.com/docs/basics#styling-any-components

Upvotes: 0

Kevin Gelpes
Kevin Gelpes

Reputation: 691

One way is not using React router link component and instead using your own link component with an onclick property of props.history.push("ROUTE")

Upvotes: 1

Related Questions