如何在样式组件中使用自定义html元素？

Question

这很好：

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

我们如何做到这一点：

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

Answer 1

这应该可以解决问题。

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

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

Answer 2

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

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