我正在尝试使用react-icons在我的react应用程序上设置从另一个file.js动态导入的图标的样式

Question

我的图标被导入并存储在单独的 file.js 中 我在 .jsx 文件中导入了 file.js 并且我可以看到在我的网站上渲染的 svgs 我也可以更改大小，但无论我做什么，颜色仍然是黑色试过了。

我正在使用“react-icons/tb|react-icons/gi|react-icons/fa|react-icons/fa6|react-icons/bi|react-icons/bs|react-icons/io5|react-图标/md | 反应图标/tb | 反应图标/ai "

如果有人可以提供帮助，将不胜感激。谢谢你

这是我的图标部分的 .jsx 代码：

<Slider {...settings} className="categories_list">
                {categories?.slice(1, 9).map((category, index) => (
                    <Link to={`/listings/category/${category.label}`} key={index}>
                        <div className="category">
                            <img src={category.img} alt={category.label} />
                            <div className="overlay"></div>
                            <div className="category_icon">
                            {category.icon}
                                <p>{category.label}</p>
                            </div>
                        </div>
                    </Link>
                ))}
            </Slider>

这是 .scss 代码：

&_icon {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        color: #fff;

        svg {
          font-size: 60px;
          color: #fff;
        }

        p {
          font-weight: 600;
          text-transform: capitalize;
          color: inherit;
        }
 } ```

Answer 1

经过很长一段令人困惑的时间后，我发现了这一点，我的 React 应用程序设置中的 app.css 有一条通用规则，该规则覆盖了我尝试在不同的 scss 文件上设置的每个规则，现在它已修复。规则默认为 *{ color= black;谢谢。