Css 悬停不适用于特定类型的类

Question

我在一个React项目上工作，我有一个按钮，在链接(React -router dom)。所以要编辑按钮的css，我需要添加"a。"课前:

<Link to={'/Register'} className="btn">Sign up</Link>

在css中:

a.btn {
background-color: var(--lighter-hover-color);
color: white;
padding: 10px 25px;
margin: 15px 0;
border: none;
cursor: pointer;
border-radius: 20px;
border: 1px solid var(--hover-color);
text-decoration: none;

}

所以当我尝试添加悬停函数到这个类时:

a.btn :hover {
transform: scale(1.2);}

什么也不会发生。所以我的问题是有没有办法让悬停工作。我发现的问题是，当我有点(.)，这使得悬停功能不可用。

Answer 1

这是不工作的，因为你不能使用a标签来瞄准Link反应组件。

我要去掉a.btn，只用btn:hover。

为react元素设置样式的更好、更优雅的方法是使用styled-components或css modules。

参考这篇文章来了解更多关于react应用的不同样式化方式https://css-tricks.com/different-ways-to-write-css-in-react/