如何在React中旋转图标

Question

我正试图通过React制作一个旋转图标，我认为我的尝试中缺少了一些东西。这是我的返回函数。

return (
<div className="loader">
<p>Loading Data</p>
<FaIcons.FaCog className="loaderIcon"/>
</div>
);

这是CSS。

.loaderIcon .spin.FaIcons{
margin-right: 7px;
top: 2px;
animation: spin 1s infinite linear;
}
@keyframes spin {
from {
transform: scale(1) rotate(0deg);
}
to {
transform: scale(1) rotate(360deg);
}
}

有人知道图标为什么不旋转吗？

Answer 1

问题是我引用了错误的类。我只需要引用图标类。

.loaderIcon {
margin-right: 7px;
top: 2px;
animation: spin 1s infinite linear;
}

Answer 2

您使用的CSS选择器.loaderIcon .spin.FaIcons非常具体。如果希望从FaIcons.FaCog渲染的元素旋转，请将选择器更改为.loaderIcon, .spin.FaIcons。插入了一个逗号，将其转换为选择器列表，而不是单个选择器。

例如.loaderIcon和.spin.FaIcons，而不是.loaderIcon .spin.FaIcons；

与React相比，这更像是一个CSS问题，因此它也适用于其他web应用程序。