Как создать динамический стиль компонента?

Question

Я пытаюсь добиться чего-то вроде этого:

import styled from 'react-emotion'

const StyledComponent = styled(({tag}) => tag)`
    // some css styles
`

И используйте это как:

<StyledComponent tag=div"/>
<StyledComponent tag="p"/>
<StyledComponent tag="ul"/>
// etc

Я ожидал, что он должен генерировать HTML следующим образом:

<div class="some-class"></div>
<p class="some-class"></p>
<ul class="some-class"></ul>

Фактический вывод:

div
p
ul

У меня вопрос, можно ли этого достичь или я что-то упускаю?

Answer 1

Похоже, я нашел решение своей проблемы. Делюсь своим ответом тем, кто может столкнуться с той же проблемой.

Я изменился StyledComponent заявление к следующему:

import styled from 'react-emotion'

const StyledComponent = styled(({tag, children, ...props}) => React.createElement(tag, props, children))`
    // some css styles
`

Это работает, как ожидалось.

Если у кого-то есть лучшие ответы, пожалуйста, пишите. Спасибо

Answer 2

Ты используешь react-emotion неправильно, пожалуйста, попробуйте это.

const StyledComponent = ({ tag, children, ...props }) => {
  const Container = styled(tag)`
    background-colo: red;
  `;
  return <Container {...props}>{children}</Container>;
};

Демо: https://codesandbox.io/s/lr4xxp3757

Answer 3

Что сработало, так это использование полиморфной опоры as (https://styled-components.com/docs/api#as-polymorphic-prop):

      const StyledComponent = styled.div``

type ComponentProps = {
  tag?: AnyStyledComponent
  children: React.ReactNode
}

const Component = ({ tag, children }: ComponentProps) => (
  <StyledComponent as={tag}>{children}</StyledComponent>
)

Объявление стилизованного компонента вне функционального компонента избавит нас от предупреждений консоли, таких как это: https://github.com/styled-components/styled-components/issues/3117 .