Question

我想在react中使用Typescript将样式应用于span标签。我旁边有一个带有值的标签计数器。像下面这样

计数器0

我有一个类似下面的标签，

interface Props {
    color?: string;
    size?: number;
}

const Label = styled.span<Props>`
    color: ${props => props.color || props.theme.colors.text};
`;

在我的其他组件中，我使用如下标签，

render = () => {
    const count_var = 0;
    return (
         <div>
             <Label> counter </Label>
             <span style={{ color: counter === 0 ? 'red' : counter === 1 ? 'blue' : 'green' }}> 
                 {count_var} </span>
          </div>
    )
}

从上面的代码中

，如您所见，由于要基于其值将一个类添加到count变量中，因此我在span标记中包含了count变量。上面代码的输出如下所示，

counter0

如何使用Label组件根据其值将样式应用于计数器变量... 如果count var为0，则应为红色如果count var为1，则应为蓝色如果count var> 1，则应为绿色

我还需要在计数器文本与其值之间留一个空格，如下所示：

counter 0

我是使用打字稿的新手，不确定如何使用打字稿。有人可以帮我吗谢谢。

如何使用react在打字稿中添加样式？

0 个答案: