Тематические стилизованные компоненты сочетают в себе реквизит и тему - PullRequest
Новая
       12

Тематические стилизованные компоненты сочетают в себе реквизит и тему

0 голосов
/ 04 января 2019

Просто для любопытства я использую компоненты стиля в своем приложении React, и там я использую предложенную тему, чтобы везде были доступны все цвета и размеры.

В настоящее время я делаю это так: 

export const TestComponent = styled.div`
    color: ${({ theme }) => theme.white};
    background-color: ${({ theme }) => theme.white};
    border: 1px solid ${({ theme }) => theme.white};
    display: ${({ check }) => check ? 'block' : 'none'};
`;

Поэтому я использую тему из ThemeProvider, а также дополнительную проверку внешнего компонента.

Мой вопрос сейчас, почему я не могу использовать его так: 

export const TestComponent = styled.div`${({ theme, check }) => (css`
    color: ${theme.white};
    background-color: ${theme.white};
    border: 1px solid ${theme.white};
    display: ${check ? 'block' : 'none'};
`)`;

Не было бы удобнее и проще в использовании? И если так, то почему они не предлагают это так? Я просто боюсь, что у нее есть огромный недостаток, которого я сейчас не вижу.

1 Ответ

0 голосов
/ 08 января 2019

Я не верю, что что-то не так с любым подходом. Я часто использовал то, что вы делаете в вашем первом примере в большом приложении React, и у меня не было проблем (пока).

Как говорится, ваш второй пример совершенно верен. Вам даже не нужен помощник css: 

const Test = styled.div`
  ${({ theme }) => `color: ${theme.white};`}
`;

В общем, я использую помощник css для создания абстрагированных / разделяемых кусков CSS: 

const fontSize = css`
  font-size: ${({ small, large, theme }) => {
    if (small) return `${theme.small}rem`;
    if (large) return `${theme.large}rem`;
    return `${theme.normal}rem`;
  }};
`;


const Test = styled.div`
  ${({ theme }) => `color: ${theme.white};`}
  ${fontSize}
`;

А потом: 

<Test small>Hello World</Test>
...