Styling a Router Link with styled-components

styled-components react-router link
styled-components hooks
react-router link style
styled-components link
styled-components hover
styled-components css variables
styled-components typescript
styled-components attrs

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

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.

Styling react-router-dom Link using styled-components getting , 3 Answers. Internally, React Router's Link passes all the its props to an <a> DOM element. Except the ones used by Link , like to . So the styles work because the props are interpreted by Styled Components, but then the same prop is passed again to the inner <a> , which triggers the (harmless) error message. another thing you could try the "to" prop on a react Link tag can take two different values a string or an object. If it's a string, it represents the absolute path to link to, e.g. /users/123 (relative paths are not supported).

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

Basics, Simple dynamic styling: adapting the styling of a component based on its props or a global theme is simple This could be react-router-dom's Link for example. Styling Link components in react router with style props has warning about unknown props on a tag #1814 dmngu9 opened this issue Jun 16, 2018 · 5 comments Labels

react-router link translates to after all in <a> tags so style them in the same way you would style an <a> tag so let's say, you need to change their color to red then:

ul {
    color: red;
}

won't work, you will need to do:

ul a {
    color: red;
}

Basic implementation of React router and styled-components , of React router and styled-components. Contains a extreme small setup for react-router 4.1.2. Also implements Styled Components for css-in-js. 2. 2.0k. 63� Is there any example how to style router-link? Dismiss Join GitHub today. GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.

If you just want to style the Link component, then the usual way in my experience is to create a styled component like so:

const NavLink = styled(Link)`
  /* Link styles */
`

And then just render it like <NavLink>Home</NavLink>.

This also makes it easy to reuse this styled component.

Styling React Router, Environmentcreate-react-app. Files. Hello.js. index.html. index.js. package.json. Dependencies. react. 16.0.0. 16.13.1, 16.13.0, 16.12.0, 16.11.0, 16.10.2, 16.10.1 � styled-components. styled-components is a new library that focuses on keeping React components and styles together. Providing a clean and easy-to-use interface for styling both React and React

styled-components, the Modern Way to Handle CSS in React , In this post you'll find an introduction to styled-components and the is a Link component from react-router-dom with some styles applied:. As you can see, styled-components lets you write actual CSS in your JavaScript. This means you can use all the features of CSS you use and love, including (but by far not limited to) media queries, all pseudo-selectors, nesting, etc.

How to Create a Navigation Bar With React-Router, Styled , This hands-on tutorial focuses on the functional parts of creating a Bar With React-Router, Styled-Components, And Infrastructure-Components The navigation bar automatically displays the link to that new route! With styled- components you have the full control of the style of your React-Components. The creator of styled-components is also the maintainer of react-boilerplate, one of the most popular ways to set up a React project. The boilerplate includes styled-components and it makes perfect sense to just use the boilerplate if you’re starting a new app from scratch. To get started, clone the repo:

Converting CSS In React to Styled Components ― Scotch.io, The starter project is setup with React Router and has a navbar that links to No worries, we can tweak our syntax to style the Link component� At version 3.0.1-beta.13+, you could set passHref to Link (as a boolean property) to expose its href to styled-components (or any other library that wraps its <a/> tag). Using the first example of issue: it could be done this way: