Имя динамического тега Styled Component - PullRequest
Новая
       22

Имя динамического тега Styled Component

0 голосов
/ 30 августа 2018

Я хочу сделать динамический компонент. (динамический тег будет стилизованным компонентом -> эмоция) 

const Dynamic = ({ tag: Tag, children, ...rest }) =>
   <Tag {...rest}>
      { children }
   </Tag>

Компонент будет стилизованным компонентом, таким как: 

const Column = styled(div)({ color: 'red' })
const Row = styled(span)({ color: 'yellow' })

Это выглядит красиво и работает правильно, BUUUUUT:

Когда я пытаюсь использовать DynamicComponent внутри другого DynamicComponent: 

<DynamicComponent tag={Row}>
   {
      mapOver.map(item=>
         <DynamicComponent tag={Column}/>
      )
   }
</DynamicComponent>

тогда по какой-то причине дети Dynamic будут использовать стиль Dynamic Parent.

Что-то я пропустил?

P.S:.

Если вместо использования динамических стилей я делаю что-то вроде этого: 

<Row>
   <Column/>
</Row>

тогда стили, classNames, стилизованные теги применяются правильно.

Чтобы было немного яснее:

enter image description here

Как вы можете видеть, DynamicComponent будет использовать родительские стили, classNames, стилизованные теги ... (НЕ ПОВЕДЕНИЕ, КОТОРОЕ Я БУДУ ОЖИДАТЬ)

Ответы [ 2 ]

0 голосов
/ 08 июля 2019

Этот пример иллюстрирует создание динамического имени тега для styled-component : 

// All headings use the same styled-component "Heading" function
const StyledHeading = styled.div`
    font-size: ${({level}) => 4/level }em; // <- dynamic font size
    font-weight: 300;
    margin: 0;
`

// the trick here is the "as={...}" to create dynamic tag name
const Heading = ({level = 1, children}) => 
    <StyledHeading as={`h${level}`} level={level}>
        {children}
    </StyledHeading>



ReactDOM.render(
  <div>
    <Heading>Hello, world!</Heading>
    <Heading level={2}>Title 2</Heading>
    <Heading level={3}>Title 3</Heading>
  </div>,
  document.body
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/styled-components/dist/styled-components.min.js">
</script>

"as" реквизит документации

0 голосов
/ 30 августа 2018

Существует недоразумение при использовании styled-компонентов, поскольку тег предназначен для использования в качестве тега HTML (input, div и т. Д.). Лучший способ - определить StyledRow и StyledColumn отдельно и использовать их с соответствующими именами. Это также поможет сделать ваш код более читабельным.

...