CODEWITHSUNDEEP
reactjstypescriptreact-routerstyled-jsx
alina
alina

Reputation: 11

How can I style React Router elements with styled-jsx?

I have a react-router element <NavLink/> that I am trying to style with the styled-jsx library. However, the css properties I apply to its className don't have any effect. Styling normal jsx elements works perfectly fine. Does anyone know if there is another way I can style this element (I want to set text-decoration: none). If possible I would like to avoid inline styles.

Here is my simplified code:

const Header: React.FC = () => {
  return (
    <header>
      <NavLink to="/" className="nav-link">
        Home
      </NavLink>

      <style jsx>
        {`
          .nav-link {
            text-decoration: none;
          }
        `}
      </style>
    </header>
  );
};

Upvotes: 1

Views: 108

Answers (0)

Related Questions