Проблема с цветопередачей попутного ветра при скрытии компонента рабочего стола/мобильного устройства ⇐ CSS

[Anonymous]

В настоящее время я работаю над компонентом карточки, используя Tailwind CSS (и Next JS) для настольных компьютеров и мобильных устройств. Чтобы обеспечить адаптивный дизайн, я скрываю версию для настольных компьютеров на мобильных устройствах и наоборот, используя классы Tailwind (скрытые).
Однако я столкнулся с проблемой, из-за которой цвета не отображаются. отображается правильно для SVG внутри компонента карты. В частности, правильный цвет отображается только на той карточке, которая отображается первой (мобильная версия), а на рабочем столе цвет не отображается на экране.

Код: Выделить всё

const Card = ({ card }: IProps) => {
return (




);
};

const CardDesktop = ({ card }: IProps) => {
return (
[*]

);
};

const CardMobile = ({ card }: IProps) => {
return (
[*]


);
};

В SVG есть линейный градиент, так что я думаю, в этом-то и проблема:

Код: Выделить всё

Кто-нибудь знает решение этой проблемы и причину, почему это происходит?


Подробнее здесь: https://stackoverflow.com/questions/782 ... -component