@emotion/styled如何通过prop条件设置组件背景色

你的样式不生效核心是笔误导致的，附带一个可修复的规范隐患：

• 笔误问题：传参时把颜色属性拼错了，colors.balck是错误写法，正确拼写为colors.black，拼写错误导致传入的背景色值为undefined，样式自然无法渲染。
• 规范问题：直接把自定义的color属性传给原生span标签，会触发React的无效DOM属性警告，后续可能引发属性冲突、控制台报错问题。

你可以直接修正拼写先让功能跑通，更推荐用Emotion的瞬时Prop（Transient Props）写法，自定义属性加$前缀，避免属性透传到原生DOM：

import { colors } from "styling/variables";
import styled from "@emotion/styled";

const Badge = styled("span")(
  {
    padding: 5,
    borderRadius: 10,
    color: colors.white,
    fontSize: "0.7rem",
    marginRight: 10,
    width: "60px"
  },
  props => ({
    backgroundColor: props.$color
  })
);

function Priority() {
  // 修正拼写错误，同时使用$前缀的瞬时prop
  return <Badge $color={colors.black}>High</Badge>;
}

export default Priority;

注：如果你使用的是v11以下的旧版@emotion/styled不支持瞬时prop，只需要把colors.balck改成colors.black即可让背景色正常生效，不需要修改prop名。

内容的提问来源于stack exchange，提问作者Δημήτρης Τσιδοδήμος