如何使用 React 更改悬停效果上的“react-ionicons”颜色

Question

我有一个组件，其中包含使用 react-ionicons 的图标列表，如下所示：

export default function SocialIconsViewer() {

    return ( 
        <ul className="socials">
            <li><a href="www.twitter.com"><LogoTwitter/></a>
            </li>
            <li><a href="www.twitter.com"><LogoFacebook
                    title={'Facebook'}
                    /></a>
            </li><li><a href="www.twitter.com"><LogoInstagram 
                    title={'Instagram'}
                    /></a>
            </li><li><a href="www.twitter.com"><LogoYoutube 
                    title={'Youtube'}
                    /></a>
            </li><li><a href="www.twitter.com"><Mail 
                    title={'E-mail'}
                    /></a>
            </li>
        </ul>
    );
}

我正在尝试在此处导入的 css 文件中的这些图标上创建悬停效果：

.socials {
  position: absolute;
  right: 100px;
  bottom: 30px;
  z-index: 4;
  display: flex;
  flex-direction: column;
}
.socials li {
  list-style: none;
}
.socials li a {
  text-decoration: none;
  color: var(--black);
  font-size: 1.75em;
  transition: 300ms;
}
.socials li a:hover {
  color: crimson;
}

但是，这似乎不起作用，我很难找到使用反应离子的信息。

Answer 1

您的组件代码中没有导入。

import {
  LogoTwitter,
  LogoFacebook,
  LogoInstagram,
  LogoYoutube,
  Mail,
} from "react-ionicons";

这是一个非常奇怪的情况，因为 hover 和 background-color 可以在您的代码中正常工作，但 color hover 不能！ ?? 也许是包裹的问题，我不确定。

我花了很多时间在这上面......并找到了另一种方法。我希望你会喜欢它。

---

您可以使用react-icons，您需要正确安装它们并导入它们。

npm install react-icons --save

---

例子

import { FaBeer } from 'react-icons/fa';

export default function Question() {
    render() {
        return <h3> Lets go for a <FaBeer />? </h3>
    }
}

---

更改后的组件

import { FaFacebook, FaTwitter, FaYoutube, FaInstagram } from "react-icons/fa";

export default function SocialIconsViewer() {
  return (
    <ul className="socials">
      <li>
        <a href="https:://facebook.com" target="_blank" rel="noreferrer">
          <FaFacebook />
        </a>
      </li>
      <li>
        <a href="https://instagram.com" target="_blank" rel="noreferrer">
          <FaInstagram />
        </a>
      </li>
      <li>
        <a href="https://twitter.com" target="_blank" rel="noreferrer">
          <FaTwitter />
        </a>
      </li>
      <li>
        <a href="https://youtube.com" target="_blank" rel="noreferrer">
          <FaYoutube />
        </a>
      </li>
    </ul>
  );
}

---

如果我们使用global.css 文件，您的Css 样式可以正常工作（悬停效果）。

.socials {
  position: absolute;
  right: 100px;
  bottom: 30px;
  z-index: 4;
  display: flex;
  flex-direction: column;
}
.socials li {
  list-style: none;
}
.socials li a {
  text-decoration: none;
  color: var(--black);
  font-size: 1.75em;
  transition: 300ms;
}
.socials li a:hover {
  color: crimson;
}