React项目中如何基于Styled-components导入并使用共享CSS样式

嘿，看起来你已经搞定了共享加载背景的核心样式定义，接下来我就一步步教你怎么在组件里正确导入并复用它，超简单的！

第一步：整理共享样式文件 #

首先建议把这个加载动画的样式单独放到一个专门的样式文件里（比如src/styles/LoadingStyles.js），这样项目里任何组件都能轻松引用。完整的文件代码如下：

import { keyframes, css } from 'styled-components';

// 定义加载动画关键帧
const loadingAnimation = keyframes`
0% {
  background-position: 95% 95%;
}
50% {
  background-position: 25% 25%;
}
100% {
  background-position: 25% 25%;
}
`;

// 导出共享的加载背景CSS样式
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;
`;

第二步：在组件中导入并使用 #

接下来就可以在需要的React组件里导入这个共享样式啦，这里给你两种常用的使用方式：

方式1：创建专属的加载背景组件

直接基于styled-components创建一个自带加载背景的容器组件，以后用的时候直接调用就行：

import styled from "styled-components";
import { useState } from "react";
// 注意这里的路径要根据你的实际文件位置调整
import { LoadingBackgroundStyle } from "../styles/LoadingStyles";

// 创建带加载背景的容器
const LoadingContainer = styled.div`
  width: 100%;
  height: 280px;
  border-radius: 6px;
  // 把共享样式嵌入进来
  ${LoadingBackgroundStyle}
`;

export default function ProductList() {
  const [isLoading, setIsLoading] = useState(true);

  // 模拟加载完成
  setTimeout(() => setIsLoading(false), 2000);

  return (
    <div className="product-list">
      {/* 加载状态时显示加载背景 */}
      {isLoading ? (
        <LoadingContainer />
      ) : (
        <div>商品列表内容加载完成啦！</div>
      )}
    </div>
  );
}

方式2：给已有组件动态添加加载背景

如果不想单独创建组件，也可以给现有的styled组件添加加载状态的样式：

import styled from "styled-components";
import { useState } from "react";
import { LoadingBackgroundStyle } from "../styles/LoadingStyles";

// 现有卡片组件
const ProductCard = styled.div`
  padding: 16px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  // 默认样式
  transition: all 0.3s;

  // 加载状态下应用共享样式
  &.loading {
    ${LoadingBackgroundStyle}
    // 可以再加一些隐藏内容的样式
    color: transparent;
    border-color: transparent;
  }
`;

export default function ProductItem() {
  const [isLoading, setIsLoading] = useState(true);

  setTimeout(() => setIsLoading(false), 2000);

  return (
    <ProductCard className={isLoading ? "loading" : ""}>
      {!isLoading && <h3>示例商品名称</h3>}
    </ProductCard>
  );
}

小提醒 #

• 别忘了确保你的项目已经用ThemeProvider包裹了根组件，不然props.theme.colors会找不到对应的颜色值哦！
• 样式文件的导入路径一定要检查对，不然会出现找不到模块的错误。
• 以后要修改加载动画的速度、颜色或者渐变方向，直接在LoadingStyles.js里改就行，所有用到的组件都会自动同步更新，这就是共享样式的便利之处～

备注：内容来源于stack exchange，提问作者Bob