How to style a react Link component?

Question

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.

Answer 1

Link is a react component, which by default isn't directly read/defined in native css styling. Saying that means only one thing, Links are just anchor tags, and thus you can style/modify them in the css styling sheet using a. To style all links available on the page (general styling) just add a { general styles..} on top of your sheet. And then to style each one on their own, make sure its wrapped in a div with a className, and in your styles do it this way: .divClassNameYouChose a { custom styles... }