Как добавить стиль в машинописи с помощью реакции?

Question

Я хочу применить стиль к тегу span, используя машинопись в реакции. У меня есть счетчик меток со значением рядом с ним. что-то вроде ниже

counter 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

Я новичок в использовании машинописи и не уверен, как использовать стили, используя его. Может ли кто-нибудь помочь мне с этим. спасибо.