如何在Styled Components中创建支持传入CSS属性的Mixin？

你的代码存在两个核心问题：

1. 调用Mixin时未传入color参数，导致Mixin内的三元判断无法正确匹配颜色逻辑；
2. 错误地将Mixin输出嵌套在background-color属性中，Mixin本身已经生成了完整的CSS规则（包含目标属性和hover伪类），这种写法会产生无效的CSS语法。

修改后的完整代码 #

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

const TestMixin = ({ color, property }) => css`
  ${property}: ${color === "blue" ? "blue" : color === "green" ? "green" : "red"};

  &:hover {
    ${property}: ${color === "blue" ? "red" : color === "green" ? "blue" : "green"};
  }
`;

// 正确调用方式：直接将Mixin插入到组件样式中，传入必要的color和property参数
const Container = styled.div`
  ${TestMixin({
    color: "blue",
    property: "background-color"
  })};
`;

关键修改说明 #

• 传入必填参数：确保调用TestMixin时同时传递color和property，让颜色逻辑正常工作；
• 直接插入Mixin：不需要将Mixin的输出赋值给某个CSS属性，因为Mixin已经生成了包含目标属性和hover状态的完整代码，直接插入到组件样式中即可生成合法的CSS。

扩展优化（可选） #

如果想让Mixin更健壮，可以给参数设置默认值，避免因漏传参数导致的问题：

const TestMixin = ({ color = "red", property = "background-color" }) => css`
  ${property}: ${color === "blue" ? "blue" : color === "green" ? "green" : "red"};

  &:hover {
    ${property}: ${color === "blue" ? "red" : color === "green" ? "blue" : "green"};
  }
`;

// 此时可以省略部分参数，使用默认值
const DefaultContainer = styled.div`
  ${TestMixin({})};
`;

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