Как использовать пользовательские HTML-элементы в styleled-компонентах?

Question

Это прекрасно работает:

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

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

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

Answer 1

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

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

Answer 2

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

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

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