如何使用样式组件导入共享CSS

Question

我在我的 React 项目中使用样式组件。我想创建一个共享加载背景。我有以下定义：

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}
`;

`;

由于某种原因它没有显示背景样式。当我在与 SkeletonPlayer 相同的文件中定义 LoadingBackgroundStyle 时，它工作正常。这里发生了什么？

我尝试在同一个文件中定义 css，但这不起作用。

Answer 1

导入路径中有三个点

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

我们不知道您的文件结构，但我认为这应该是：

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

或：

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