Стиль компонента на основе его tagName в Emotion - PullRequest
Новая
       7

Стиль компонента на основе его tagName в Emotion

0 голосов
/ 07 февраля 2020

Я разрабатываю Text компонент, который расширяет Box. Это более или менее выглядит следующим образом: 

const Text = styled(Box.withComponent('p'))`
  font-family: 'Roboto', sans-serif;
`;

То, что я пытаюсь сделать, это стиль, основанный на теге. Вариант использования в основном выглядит следующим образом: 

<Text as="h1">Big Lead Header</Text>
<Text>Content goes here</Text>

В качестве альтернативы это может быть сделано: 

const Header = Text.withComponent('h1');

<Header>My header</Text>

Я пытался нацелиться на h1 непосредственно в css, но для безрезультатно 

const Text = styled(Box.withComponent('p'))`
  font-size: 2rem;
  font-family: 'Roboto', sans-serif;
  h1 & {
    font-size: 2rem;
  }
`;

это можно выбрать в CSS или с эмоциями?

...