Блог

Главная - Вопросы по программированию - Как использовать пользовательские html-элементы в styled-components?

Как использовать пользовательские html-элементы в styled-components?

#reactjs #styled-components

#reactjs #styled-components

Вопрос:

Это работает нормально:

 const Cool = styled.div`
  background: blue;
`

Как нам это сделать:

 const Sweet = styled('cool-sweet')`
  background: blue;
`

Комментарии:

1. Я видел это , но на самом деле не очень помогает

Ответ №1:

Это должно сработать.

 import React from 'react';
import styled from 'styled-components';

const Sweet = styled(({ children, ...rest }) => (
  <cool-sweet {...rest}>{children}</cool-sweet>
))`
  background: blue;
`;

Комментарии:

1. вы это тестировали?

Ответ №2:

 const Cool = styled.div`
  background: blue;
`

const Sweet = styled(Cool)` \override <Cool/>
  background: red;
`