When I try to style the Link component, it does not work:

Link {
  padding: 0 30px;
}

But it does work when I use inline styling

<Link style={{padding: '0 30px'}} to="/invoices">Invoices</Link>

I use import './App.css' and styling normal elements like div does work.

CodePudding user response：

Provide className as a prop to Link

.link-styles {
  padding: 0 30px;
}

<Link className={"link-styles"} to="/invoices">
  Invoices
</Link>

CodePudding user response：

There is a library called styled components that can help you... here is some code example :

import { Link } from 'react-router-dom';
import styled from 'styled-components';

const MyLink =  styled(Link)`
  padding: 0 30px;

`;

CodePudding user response：

There are many ways you can do this:

1. Using id in the component

    <Link id="link_Styles" to="/invoices">
          Invoices
    </Link>

And css is like

#link_Styles { 
   padding: 0 30px;
}

2. Using bootstrap inbuilt classes like

    <Link className="px-4" to="/invoices"> //px-4 means 24px (1.5rem)
          Invoices
    </Link>

3. Using tailwindCSS classes

    <Link className="px-7" to="/invoices">  //px-7 means 28px (1.75rem)
          Invoices
    </Link>

But for approach 2 & 3, you have to embed their CDN links respectively.

4. Using className like done by @Amila in first answer