Как импортировать общий CSS с помощью Styled-компонентов ⇐ CSS

[Anonymous]

Я использую стилизованные компоненты в своем проекте реагирования. Я хочу создать общий фон загрузки. У меня есть следующее определение:

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

const loadingAnimation = keyframes`
0% {
background-position: 95% 95%;
}
50% {
background-position: 25% 25%;
}
100% {
background-position: 25% 25%;
}
`;

export const LoadingBackgroundStyle = css`
background-image: linear-gradient(
-60deg,
${(props) => props.theme.colors.secondary600},
${(props) => props.theme.colors.secondary600},
${(props) => props.theme.colors.secondary600},
${(props) => props.theme.colors.secondary700},
${(props) => props.theme.colors.secondary600},
${(props) => props.theme.colors.secondary600},
${(props) => props.theme.colors.secondary700}
);
background-size: 400% 400%;
animation: ${loadingAnimation} 1.25s linear infinite;
`;

и тогда я использую его вот так:

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

import styled from "styled-components";

import { LoadingBackgroundStyle } from ".../PerformerInfoCard.styled";

export const SpotifyWrapper = styled.div``;

export const SkeletonPlayer = styled.div`
height: ${(props) => props.$height}px;
width: 100%;
border-radius: ${({ $borderRadius }) => $borderRadius};
${LoadingBackgroundStyle}
`;

`;

по какой-то причине не отображается стиль фона. Он отлично работает, когда я определяю LoadingBackgroundStyle в том же файле, что и SkeletonPlayer. Что здесь происходит?
Я попробовал определить CSS в том же файле, но это не сработало.

Подробнее здесь: https://stackoverflow.com/questions/784 ... components