在 html 中內聯 css<a></a> 標記反應

Question

我有一個鏈接，當我點擊它時，我想默認為黑色，白色。 閱讀有關使用“活動”標簽並在活動時設置顏色的信息。 目前我在這里有這個代碼，但是當我按下它時它似乎沒有改變文本的顏色。

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

我所有的搜索結果都顯示了如何在標准 html 中使用 active，但我不能在這里這樣做，因為它是 React。 我應該如何實現這一目標？

編輯：我不能使用 css 文件，我的項目由於某些原因不會編譯它們。

Answer 1

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

相應地進行定制。 在這里閱讀更多

Answer 2

您不能在 React 內聯樣式中直接使用諸如 active、hover、visited 之類的偽類。 為此，您可以使用許多 CSS-in-JSS 庫。 對於您的情況，我認為這將是 CSS 代碼：

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

如果你不想使用 CSS-in-JSS 庫，你可以使用 onClick 事件並用另一種樣式標記 'a' 元素

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