CODEWITHSUNDEEP
cssreactjs
Oba Api
Oba Api

Reputation: 261

How to style a react Link component?

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.

Upvotes: 2

Views: 16312

Answers (6)

Ahmad Ali
Ahmad Ali

Reputation: 66

I am using the "react-router-dom": "^6.26.1". Its provide the NavLink a component like

import { NavLink } from "react-router-dom";
    <NavLink
       style={{
            backgroundColor: getStyle(
               homepageStyles?.Section1?.ButtonColor,themeStyle?.ButtonColor,),
                }}
                to="/invest-with-us"
                className="link"
              >
                Invest with us
   </NavLink>

And if you want to go with

<Link to="/about"></Link>

You can use the styled-components package

import styled from "styled-components";
const StyledLink  = styled(Link)`
 //some CSS styles here
   `;
<StyledLink to="/about">About</StyledLink>

It's working fine for me.

Upvotes: 0

Cameron Hudson
Cameron Hudson

Reputation: 3929

If you're willing to install an additional library, it's possible to style built-in components with styled-components. Otherwise, with vanilla React, you would need to add a className property to each one.

Upvotes: 0

Bahaa Salaheldin
Bahaa Salaheldin

Reputation: 529

The browser will manipulate Link component as element in Dom, so just write :

a{
  padding: 0 30px;
}

in your CSS

Upvotes: 0

Ali Shour
Ali Shour

Reputation: 224

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... }

Upvotes: 1

user12417761
user12417761

Reputation:

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;
}
  1. Using bootstrap inbuilt classes like
    <Link className="px-4" to="/invoices"> //px-4 means 24px (1.5rem)
          Invoices
    </Link>
  1. 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.

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

Upvotes: 0

Amila Senadheera
Amila Senadheera

Reputation: 13245

Provide className as a prop to Link

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

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

Upvotes: 1

Related Questions