Незначительные изменения в многократно используемых стилевых компонентах - PullRequest
Новая
       40

Незначительные изменения в многократно используемых стилевых компонентах

1 голос
/ 10 марта 2019

Я начал использовать styled-components в одном из моих проектов.Я хотел бы знать рекомендуемый способ переопределить / расширить их в контейнерах, которые его используют.

Например:

Многоразовый Button компонент: 

const Button = styled.button`
  background: transparent;
  border-radius: 3px;
  border: 2px solid red;
  color: red;
`;

СейчасПредположим, я использую это в разделе, но нужно применить левое поле.Я могу сделать это несколькими способами:

Расширить: 

const NewButton = styled(Button)`
  margin-left: 10px;
`;

Встроенный стиль: 

<Button style={{marginLeft: '10px'}}>Normal Button</Button>

Расширение выглядит как лучший способ, если существует более 3,4 правил для переопределения.

Но, скажем, для одного правила, такого как margin, padding, display: none, которое может встречаться очень часто, создание новой обертки каждый раз добавляет много шаблонов.Встроенные стили хорошо работают в этом аспекте, но у них есть свои подводные камни .

Какой оптимальный подход хорошо подходит для больших приложений?

1 Ответ

0 голосов
/ 10 марта 2019

Для стилей, которые могут незначительно отличаться в зависимости от использования, я рекомендую использовать объект props внутри стиля для вычисления свойства до его определения.

При этом ваши кнопки могут выглядеть примерно так: 

// style that will always apply margin-left even if it doesn't exist
const Button = styled.button`
  margin-left: ${props => props.marginLeft}
`
// style that won't apply margin-left if it doesn't exist
const Button = styled.button`
  ${props => props.marginLeft && `
    margin-left: ${props.marginLeft};
  `}
`

// button with margin-left: 10px
<Button marginLeft="10px" />

// button without margin-left
<Button />

Это немного сложнее для реализации, но оно того стоит, когда стили могут меняться между похожими элементами.

...