Встроенный css внутри тега html <a></a> в реакции

Question

У меня есть ссылка, которая по умолчанию должна быть черной и белой, когда я нажимаю на нее. Прочтите об использовании тега active и настройке цвета, когда он активен. В настоящее время у меня есть этот код прямо здесь, но он, кажется, не меняет цвет текста, когда я нажимаю его.

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

Все мои результаты поиска показали, как использовать active в стандарте html, но я не могу сделать это здесь, так как это React. Как мне достичь этого?

Редактировать: я не могу использовать css файлы, мой проект не будет компилировать их по причинам.

Answer 1

Вы не можете использовать псевдо-классы, такие как active, hover, которые посещаются напрямую, в стиле реакции в строке. Для этого вы можете использовать множество библиотек CSS -in-JSS. Я думаю, что для вашего случая это будет код CSS:

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

Если вы не хотите использовать библиотеки CSS -in-JSS, вы можете использовать onClick Event и отметить ' элемент с другим стилем

//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>

Answer 2

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

Настройте соответственно. Подробнее здесь