Reactjs 我想用道具传递的值更改颜色

我正在使用react和typescript。
我想用道具传递的值更改颜色。
在道具中，字符串类型主要、次要或品牌将被传递。
当主屏幕出现时，我想将“蓝色”应用于背景，将“绿色”应用于次屏幕，将“黄色”应用于品牌

type Props = {
  backgroundColor: 'primary' | 'secondaｒｙ' | 'brand';
  size?: 'xs' | 'sm' | 'md' | 'lg';
};


export const Button: FunctionComponent<Props> = ({ backgroundColor, size, children }) => {
    return (
      <Box colorScheme={backgroundColor} size={size}>
        {children}
      </Box>
    );
  }
};

类型道具={
背景色：'主'|'辅Aｒｙ' | '品牌'；
尺寸？：“xs”|“sm”|“md”|“lg”；
};
导出常量按钮：FunctionComponent=（{backgroundColor，size，children}）=>{
返回(
{儿童}
);
}
};

假设

框

组件将颜色作为其

配色方案

道具，只需定义从

背景色

到要应用的颜色的映射即可

const COLORS: Record<Props['backgroundColor'], string> = {
    primary: "blue",
    secondary: "green",
    brand: "yellow"
};

export const Button: FunctionComponent<Props> = ({ backgroundColor, size, children }) => {
    return (
      <Box colorScheme={COLORS[backgroundColor]} size={size}>
        {children}
      </Box>
    );
  }
};

const COLORS:记录={
初级：“蓝色”，
中学：“绿色”，
品牌：“黄色”
};
导出常量按钮：FunctionComponent=（{backgroundColor，size，children}）=>{
返回(
{儿童}
);
}
};

↑这种写作风格叫泛型吗？