#css #reactjs #svg #tailwind-css
Вопрос:
Я использую @heroicons/react: ^1.0.5 и пытаюсь придать значкам стиль, применив другой цвет. Я использую tailwindcss для управления своим CSS.
Когда я объявляю следующий компонент внутри button тега
lt;PencilIcon className='text-white' /gt; Я получаю следующий результат в своем браузере (Chrome 95)
Точно такой же код работает, когда я открываю приложение на своем телефоне с помощью Chrome 95 (значок карандаша белый).
Это сгенерированный HTML-код для значка:
lt;svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true" class="text-white"gt; lt;path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"gt;lt;/pathgt; lt;/svggt; Когда я открываю devtools, я вижу, что вычисленный цвет svg тега действительно white есть, но вычисленный цвет path тега rgb(17, 24, 39) унаследован от следующего правила CSS, которое у меня есть в моем глобальном файле CSS.
* { font-family: Inter, sans-serif; @apply text-gray-900; } Комментируя @apply директиву, я решаю свою проблему, но мне любопытно, почему она ведет себя таким образом. Особенно когда Хром на моем телефоне справляется с этим нормально.