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

Question

我有一个组件，其中包含一个使用反应离子图标的图标列表，如下所示：

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

但是，这似乎不起作用，我很难找到与 react-ionicons 一起使用的信息。

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

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

How to change 'react-ionicons' color on hover effect with React

html

css

reactjs

ionicons

react-typescript