react中的html <a></a>标签内的内联css答案

【问题标题】：Inline css inside a html <a></a> tag in reactreact中的html <a></a>标签内的内联css
【发布时间】：2020-07-11 23:27:25
【问题描述】：

我有一个链接，当我点击它时，我希望它默认为黑色和白色。阅读有关使用“活动”标签并在其处于活动状态时设置颜色的信息。目前我在这里有这段代码，但是当我按下它时它似乎并没有改变文本的颜色。

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

我所有的搜索结果都显示了如何在标准 html 中使用 active，但我不能在这里这样做，因为它是 React。我应该如何做到这一点？

编辑：我不能使用 css 文件，我的项目由于某些原因无法编译它们。

【问题讨论】：

你有没有先用谷歌搜索一下。这个问题可能已经有 20 多年的历史了。还是参考我的回答吧。

标签： html css reactjs

【解决方案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;
}

进行相应的定制。阅读更多here

【讨论】：

【解决方案2】：

您不能在反应内联样式中直接使用诸如活动、悬停、访问等伪类。为此，您可以使用许多 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>

【讨论】：