Как использовать свойство интерфейса машинописного текста со свойством margin?

Question

У меня есть компонент Label, который является тэгом span и принимает вес реквизита и его размер, как показано ниже,

interface Props {
    weight?: 200 | 400 | 500 | 700 | 900;
}

const Label = styled.span<Props>`
    margin: 0;
    font-weight: ${p => p.weight || 200};
`;

Теперь я использую его в другом компоненте, и мне нужно добавить margin- право на компонент Label, как показано ниже,

render = () => {
    return (
        <Label 
            weight={400}>
            without using margin-right
        </Label>
        <Label
            weight={700} 
            margin-right={5px} //here i want to add margin-right
        </Label>
    )
}

Как я могу изменить компонент Label таким образом, чтобы он принимал свойство margin-right, или даже лучше добавить свойство margin с четырьмя значениями, что-то вроде margin = {0 0 0 5} px;

Может ли кто-нибудь помочь мне с этим. спасибо.

Answer 1

Вы должны обновить свой Props до следующего:

interface Props {
    margin?: string
    mb?: string
    ml?: string
    mr?: string
    mt?: string
    weight?: 200 | 400 | 500 | 700 | 900;
}

Примечание: mb будет представлять margin-bottom и т. Д. *

Тогда обновите ваш Label следующим образом:

const Label = styled.span<Props>`
    font-weight: ${p => p.weight || 200};
    margin: ${p => p.margin ? margin : 0};

    ${p => p.mb ? `margin-bottom: ${mb};` : ''}
    ${p => p.ml ? `margin-left: ${ml};` : ''}
    ${p => p.mr ? `margin-right: ${mr};` : ''}
    ${p => p.mt ? `margin-top: ${mt};` : ''}
`;

Затем, наконец, для его реализации вы можете сделать что-то вроде этого:

<Label
  weight={700} 
  mr="5px"
</Label>

Вы можете использовать margin или mb, ml, mr и mt. Если вы используете margin и mb. Значение mb переопределяет нижнее значение для margin.

Помните, реализуйте его так mr="5px" или mr={"5px"}, а не так: mr={5px}.