使用styled-components设置Text组件动态颜色及TS报错求解

不需要在theme常量中额外定义disable属性。这个TS报错和theme配置无关，核心原因是你没有给styled组件声明自定义props类型，同时代码里还存在几个逻辑bug。

• 类型定义错误：TextType中disable被定义为string类型，但你需要的是布尔值，才能同时支持简写传参<Text disable>和变量传参<Text disable={变量}>两种写法
• 参数透传错误：组件内部给TextStyle传参时硬写了disable属性，等价于永远传入固定值true，完全没有使用外部传入的disable状态
• 类型缺失：定义TextStyle时没有声明它要接收disable这个自定义属性，TS默认只会给styled组件注入原生DOM属性和theme类型，自然识别不到disable字段
• 逻辑写反：颜色判断逻辑和预期相反，禁用状态下应该读取theme.color.disable，正常状态读取theme.color.text，原代码的判断条件刚好反过来

import React from "react";
import styled, { css } from "styled-components";

type TextType = {
  text: string;
  disable?: boolean; // 设为可选属性，不传时默认值为false
};

export const Text: React.FC<TextType> = ({ text, disable = false }) => {
  // 将外部传入的disable状态透传给样式组件
  return <TextStyle disable={disable}>{text}</TextStyle>;
};

// 通过泛型声明样式组件接收的自定义props类型，解决TS报错
const TextStyle = styled.span<{ disable: boolean }>`
  ${({ theme, disable }) => css`
    color: ${disable ? theme.color.disable : theme.color.text};
  `}
`;

修复后的代码完全支持你需要的两种使用方式：

// 布尔简写方式，等价于disable={true}
<Text disable text={text} />

// 传入状态变量/表达式方式
<Text text={text} disable={disable} />

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