Change default color of Link from blue to white

css reactjs redux react-router react-router-redux
Lokesh Agrawal picture Lokesh Agrawal · Sep 7, 2017 · Viewed 35.7k times · Source

I am using Link component from react-router-link which applies blue color css to the text just like an anchor tag does. I want to change this to white, how can I do that?

onHover I want to change it to blue.

Answer

Chase DeAnda picture Chase DeAnda · Sep 7, 2017

Since Link get's transpiled to an <a>, you can use css to style all <a> and change all links color to white:

a {
  color: #FFF;
}
a:hover {
   color: #00F
}

Or add a .link class to each Link:

<Link to="/" className="link" />

...

.link {
  color: #FFF;
}
.link:hover {
   color: #00F
}

Edit: You can also pass in an inline style. You can't pass :hover rules inline though:

<Link to="/" style={{ color: '#FFF' }} />

Related questions

CSS for colouring one row of antd table in react

This is the CSS for the antd style I'm using style.css .ant-table-tbody > tr > td, .ant-table-thead > tr > th { padding:4px; } tr:nth-child(odd){ background: #f1e6ff; } tr:nth-child(even){ background: white; } thead[class*="ant-table-thead"] th{ …

Read More
React.js inline style best practices

I'm aware that you can specify styles within React classes, like this: const MyDiv = React.createClass({ render: function() { const style = { color: 'white', fontSize: 200 }; return <div style={style}> Have a good and productive day! </div>; } }); Should I …

Read More
How to add multiple classes to a ReactJS Component?

I am new to ReactJS and JSX and I am having a little problem with the code below. I am trying to add multiple classes to the className attribute on each li: <li key={index} className={activeClass, data.class, "…

Read More