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

Question

Просто для любопытства я использую стилевые компоненты в своем приложении 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'};
`)`;

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

Answer 1

Я не верю, что с этим подходом что-то не так. Я часто использовал то, что вы делаете в вашем первом примере в большом приложении 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>