如何通过Props动态更改Styled Components组件的样式？

问题描述 #

我正尝试重构CSS以使用styled-components，希望只需部署Cloud组件并通过Props声明其尺寸样式与动画样式，使用方式如下：

<Cloud size={TinyCloud} animation={cloud_1}/>

已定义Cloud基础样式、4种尺寸样式（如TinyCloud）、12种动画样式（如cloud_1），尺寸与动画样式分别在独立文件导出。曾尝试过一段不可行的写法，希望替代传统类名写法，请问如何实现通过Props动态设置组件样式？

解决方案 #

核心思路 #

利用styled-components的样式片段组合和组件接收Props注入样式的特性，将尺寸、动画样式以css片段形式定义，再通过Props动态注入到基础Cloud组件中，同时避免重复创建styled组件影响性能。

步骤1：修正基础样式定义 #

将原基础Cloud改为css样式片段（而非直接创建styled组件），方便后续组合：

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

// 基础Cloud样式片段
const cloudBaseStyles = css`
  -webkit-animation: clouds 60s infinite linear;
  -moz-animation: clouds 60s infinite linear;
  -ms-animation: clouds 60s infinite linear;
  -o-animation: clouds 60s infinite linear;
  animation: clouds 60s infinite linear;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  position: relative;
  margin: 20px 20px 10px 2050px;
  width: 54px;
  height: 5px;
  background: black;
  & div {
    -moz-box-shadow: inset -2px -3px 0 0 #f7e7eb;
    -webkit-box-shadow: inset -2px -3px 0 0 #f7e7eb;
    box-shadow: inset -2px -3px 0 0 #f7e7eb;
    position: absolute;
    border-radius: 50%;
    width: 12px;
    height: 12px;
    left: -3px;
    bottom: 0;
    background: #fafbf0;
    z-index: 10;
  }
  & div:first-child + div {
    -moz-transform: scale(1.6, 1.6);
    -ms-transform: scale(1.6, 1.6);
    -webkit-transform: scale(1.6, 1.6);
    transform: scale(1.6, 1.6);
    margin: 0 0 4px 13px;
    z-index: 9;
  }
  & div:first-child + div + div {
    -moz-transform: scale(2.4, 2.4);
    -ms-transform: scale(2.4, 2.4);
    -webkit-transform: scale(2.4, 2.4);
    transform: scale(2.4, 2.4);
    margin: 0 0 9px 32px;
    z-index: 8;
  }
  & div:first-child + div + div + div {
    -moz-transform: scale(1.3, 1.3);
    -ms-transform: scale(1.3, 1.3);
    -webkit-transform: scale(1.3, 1.3);
    transform: scale(1.3, 1.3);
    margin: 0 0 2px 50px;
    z-index: 7;
  }
  @-webkit-keyframes clouds {
    0% {
        left: -50%;
    }
    100% {
        left: 20%;
    }
  }
  @-moz-keyframes clouds {
    0% {
        left: -50%;
    }
    100% {
        left: 20%;
    }
  }
  @-ms-keyframes clouds {
    0% {
        left: -50%;
    }
    100% {
        left: 20%;
    }
  }
  @keyframes clouds {
    0% {
        left: -50%;
    }
    100% {
        left: 20%;
    }
  }
`;

步骤2：定义尺寸样式（css片段形式） #

将尺寸样式改为css片段，而非扩展styled组件，提升灵活性：

// 尺寸样式示例（其他尺寸同理）
export const TinyCloud = css`
  -moz-transform: scale(0.35);
  -ms-transform: scale(0.35);
  -webkit-transform: scale(0.35);
  transform: scale(0.35);
`;

export const MediumCloud = css`
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -webkit-transform: scale(1);
  transform: scale(1);
`;

步骤3：定义动画样式（css片段形式） #

动画样式同样用css标签定义：

// 动画样式示例
export const cloud_1 = css`
  -webkit-animation-duration: 10s;
  -moz-animation-duration:    10s;
  -ms-animation-duration:     10s;
  -o-animation-duration:      10s;
  animation-duration:         10s;
  margin-left: 40%;
`;

export const cloud_2 = css`
  -webkit-animation-duration: 20s;
  -moz-animation-duration:    20s;
  -ms-animation-duration:     20s;
  -o-animation-duration:      20s;
  animation-duration:         20s;
  margin-left: 20%;
`;

步骤4：创建可接收Props的Cloud组件 #

采用性能更优的写法：直接在styled组件中处理Props，避免重复创建组件：

// 基础StyledCloud组件，接收size和animation Props
const StyledCloud = styled.div`
  ${cloudBaseStyles}
  ${props => props.size}
  ${props => props.animation}
`;

// 对外暴露的Cloud组件
export const Cloud = ({ size, animation, ...props }) => {
  // 可添加默认值，比如未传入size时使用MediumCloud
  const finalSize = size || MediumCloud;
  const finalAnimation = animation || css``;

  return (
    <StyledCloud size={finalSize} animation={finalAnimation} {...props}>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </StyledCloud>
  );
};

步骤5：使用方式 #

现在可以按照预期的方式调用组件：

import { Cloud, TinyCloud, cloud_1 } from './path/to/cloud-components';

// 在页面中渲染
<Cloud size={TinyCloud} animation={cloud_1} />

内容的提问来源于stack exchange，提问作者fezz_xiii