如何使用React/Styled-components继承样式

Question

我正在尝试做一个组件，它包装了一些组件，并增加了动画延迟的内容，这是工作良好，但样式不是从它内部的代码继承。到目前为止，我的代码如下：

组件的调用方式：

 <Type>
    <h1>Title for me</h1>
 </Type>

它调用的代码：

import React,{useState, useEffect, useRef} from 'react'
import styled from 'styled-components'
import useTypewriter from 'components/functions/useTypewriter'

export default function Type(props) {
  const content = props.children.props.children
  console.log(props.chilren);
  const [effectContent, startEffect] = useTypewriter(content,20)

  useEffect(()=>{
    setTimeout(()=>{
      startEffect()
    },200)
  })
  return (
    <Wrap>
      <Hidden>{props.children}</Hidden>
      <OriginalStylePlease>{effectContent}</OriginalStylePlease>
    </Wrap>

  )
}

const Wrap = styled.div`
  position: relative;
`;
const Hidden = styled.div`
  visibility: hidden;
`;

const OriginalStylePlease = styled.h1`
  position: absolute;
  left: 0;
  top: 0;
`;

正如你可能已经知道的，我只是从孩子那里获取这个内容，然后把它放到一个div中，这不是我想要做的。

Answer 1

这是最后一个组件-它使用CSS属性'all‘

import React,{useState, useEffect, useRef} from 'react'
import styled from 'styled-components'
import useTypewriter from 'components/functions/useTypewriter'

export default function Type(props) {
  const content = props.children
  const [effectContent, startEffect] = useTypewriter(content,100)
  useEffect(()=>{
    setTimeout(()=>{
      startEffect()
    },props.delay)
  })
  return (
    <Wrap>
      <Hidden>{content}</Hidden>
      <Original>{effectContent}</Original>
    </Wrap>

  )
}

const Wrap = styled.div`
  all: inherit;
  position: relative;
  color: inherit;
`;
const Hidden = styled.div`
  all: inherit;
  visibility: hidden;

`;

const Original = styled.h1`
  all: inherit;
  position: absolute;
  left: 0;
  top: 0;
`;