Как добавить число рядом с sla sh, используя css, и отреагировать?

Question

я хочу добавить число рядом с sla sh так, чтобы оно выглядело как ниже

Я пробовал как ниже

render = () => {
    return (
        <Text size={25} weight={700} color={availableMobileUserCountColor}>
            {availableMobileUsersCount}
        </Text>
        <Text size={14} weight={700} color={theme.colors.text}>
            /40
        </Text>
    )
}

И компонент Text возвращает элемент span

const Text = styled.span<Props>`
    margin: 0;
    padding: 0;
    font-size: ${p => p.size || 16}px;
    font-weight: ${props => props.weight || 400};
    color: ${props => props.color};
`;

Для приведенного выше кода это выглядит так:

Как видите, sla sh и число 40 поднялись, они должны быть ниже ... как я могу это сделать. Может ли кто-нибудь помочь мне с этим. спасибо.

Answer 1

Вы можете использовать тег sub

return <p>{availableMobileUsersCount}<sub>/40</sub</p>;

Answer 2

Вы можете сделать это с помощью flex свойства display. Это не в reactjs, но это даст вам идею.

.figure {
  display:flex;
  align-items:baseline
 }
 
 .first {
  font-size:28px;
  color:orange;
  font-weight:800;
 }
 
 .second {
  font-size:16px
  color:#000;
  font-weight:600;
 }

<div class="figure"><span class="first">2</span> <span class="second"> /71</span></div>

Answer 3

Попробуйте этот код:

<View style={{ display: 'flex', flexDirection: 'row', alignItems: "flex-end"}}>
    <Text style={{ color: 'green', fontSize: 28, fontWeight: 700, lineHeight: 22 }}>
        2
    </Text>
    <Text style={{ fontSize: 10, fontWeight: 500, position: "absolute", marginLeft: 20 }}>
        /40
    </Text>
    </View>