如何为带有样式组件的文本组件设置自定义颜色?

Question

我想动态设置一个Text组件的颜色。当有禁用条件时，则更改为另一种颜色。

import React from "react";
import styled, { css } from "styled-components";
type TextType = {
text: string;
disable: string;
};
export const Text: React.FC<TextType> = ({ text, disable }) => {
return <TextStyle disable>{text}</TextStyle>;
};
const TextStyle = styled.span`
${({ theme }) => css`
color: ${(props) =>
props.disable ? theme.color.text : theme.color.disable};
`}
`;

props.disable得到错误

Property 'disable' does not exist on type 'ThemeProps<DefaultTheme>'. [2339]

theme

export const theme = {
color: {
text: black,
disable: blue,
},
};

我想用它作为

<Text disable text={text} />

或

<Text text={text} disable={disable} />

有必要在主题const中定义disable属性吗?

Answer 1

我认为这是因为在你的样式组件文本的第一个参数是'主题'，而它应该是道具。所以在你的例子中，主题和道具之间存在混淆。试试这个，看看是否有效:

import React from "react";
import styled, { css } from "styled-components";
type TextType = {
text: string;
disable: string;
};
export const Text: React.FC<TextType> = ({ text, disable }) => {
return <TextStyle disable={disable} >{text}</TextStyle>;
};
const TextStyle = styled.span`
${(props) => css`
color: ${ props.disable ? props.theme.color.text : props.theme.color.disable};
`}
`;

同样，你在组件中传递的disable道具与主题中的disable属性是不一样的。如果您不希望为每个属性使用不同的名称以避免混淆，那么您至少应该说明您作为prop传递给组件的disable类型为布尔类型，如下所示:

type TextType = {
text: string;
disable: boolean;
};