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

То, что я пытаюсь достичь, выглядит примерно так:

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

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


reactjs emotion styled-components
person Sanjay Joshi    schedule 21.06.2018    source источник

Ответы (2)


arrow_upward
2
arrow_downward

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

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

Демонстрация: https://codesandbox.io/s/lr4xxp3757

person Raghav Garg    schedule 21.06.2018
comment
Пробовал, но ничего не возвращает :( - person Sanjay Joshi; 21.06.2018
comment
@SanjayJoshi, я обновил ответ, пожалуйста, проверьте и подтвердите - person Raghav Garg; 21.06.2018

arrow_upward
1
arrow_downward

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

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

import styled from 'react-emotion'

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

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

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

person Sanjay Joshi    schedule 21.06.2018
comment
В итоге я использовал этот styled-components.com/docs/api#as-polymorphic -проп - person Flavio; 17.09.2020