Inline css inside a html <a></a> tag in react

Question

I have a link which I want to be black on default and white when I click on it. Read about using the 'active' tag and setting color when it is active. Currently I have this code right here but it doesn't seem to change the color of the text when I press it.

<a href={"#"} style={{textDecoration: 'none', color: 'black', active:{color: 'white'}}}>
   This is a link
</a>

All my search results showed how to use active in standard html, but I can't do that here since it's React. How am I supposed to achieve this?

Edit: I can't use a css files, my project will not compile them for reasons.

Answer 1

In CSS

/* unvisited link */
a:link {
  color: red;
}

/* visited link */
a:visited {
  color: green;
}

/* mouse over link */
a:hover {
  color: hotpink;
}

/* selected link */
a:active {
  color: blue;
}

Customize accordingly. Read more here

Answer 2

You cannot use pseudo classes like active, hover, visited directly in react in-line style. You can use many CSS-in-JSS libraries for that. For your case I think, this will be the CSS code :

a{
color: black;
}
a:visited{
  color: white;
}

If you don't want to use CSS-in-JSS libraries, you can use onClick Event and mark the 'a' element with another style

//get the color from the local storage, if not there put `black` as default
const storedColor = localStorage.getItem("aColor") || JSON.stringify('black');
const [color,setColor] =useState(storedColor);
....
changeColor = e => {
setColor('white'); 
//Storing the color in local storage and use the color next time he opens the url again.
localStorage.setItem("aColor", JSON.stringify('white'));
}
....
<a onClick={changeColor} style={{color: color}}>
This is a link
</a>