CODEWITHSUNDEEP
htmlcssreactjssassreact-router
AG_HIHI
AG_HIHI

Reputation: 1995

How to override react-router-link Link style properties?

I am trying to simply change the color of each displayed Link in the app:
enter image description here

The default color is blue as you see.
Since Link depends on the html a tag, I went to this App.scss file and tried to override it:

App.scss

// Styles
// Customizing link color
a {
  color: #fff;
}
a:hover {
  color: rgb(109, 5, 5);
}
// CoreUI Icons Set
@import "~@coreui/icons/css/coreui-icons.css";
// Import Flag Icons Set
@import "~flag-icon-css/css/flag-icon.min.css";
// Import Font Awesome Icons Set
@import "~font-awesome/css/font-awesome.min.css";
// Import Simple Line Icons Set
@import "~simple-line-icons/css/simple-line-icons.css";
// Import Main styles for this application
@import "./scss/style.scss";

However, still nothing changed. Any idea what I am doing wrong?

Upvotes: 1

Views: 1527

Answers (1)

Domagoj Vuković
Domagoj Vuković

Reputation: 178

The problem should be your load order.

What is probably happening here is that you are setting

a {
  color: #fff;
}
a:hover {
  color: rgb(109, 5, 5);
}

And after that, you are importing styles that probably have color properties on a and a:hover and your style is overridden.

In most cases you should put imports at the top of your files and then write your custom code/styles/whatever.

Upvotes: 1

Related Questions