使用@heroicons/react设置className颜色不生效，图标始终为黑色

通配符*选择器会匹配页面所有元素，包括SVG内部的<path>等子元素。你在全局规则中通过@apply text-gray-900给所有元素直接设置了颜色属性，该样式的优先级远高于<path>从父级<svg>继承的currentColor值。
此时<svg>标签本身的text-white类生效，计算值为白色，但<path>被通配符规则直接命中，颜色计算值为rgb(17, 24, 39)，stroke="currentColor"会优先使用当前<path>自身的颜色值，因此图标显示为黑色。

Chrome桌面版和移动版即使主版本号相同，实际渲染引擎的小版本补丁、兼容性规则实现存在差异。Chrome 95桌面版的解析规则中，通配符选择器会正常匹配SVG内部的所有子元素，因此*的样式会生效到<path>上。而同期移动端Chrome 95的实现中，对SVG内部元素的通配符匹配逻辑存在兼容差异，没有将*定义的样式应用到SVG的子渲染元素上，因此<path>可以正常继承父级<svg>的白色，图标显示正常。

• 调整全局样式规则，避免用通配符设置全局颜色，改为在<body>标签上设置，样式会通过继承传递给普通文本元素，不会直接命中SVG子元素：

body {
    font-family: Inter, sans-serif;
    @apply text-gray-900;
}

• 保留通配符规则的前提下，添加规则让SVG内部元素继承父级颜色：

svg * {
    color: inherit;
}

• 也可以修改通配符匹配规则，排除SVG相关元素：

*:not(svg, svg *) {
    font-family: Inter, sans-serif;
    @apply text-gray-900;
}

内容的提问来源于stack exchange，提问作者Diego ROJAS