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

Question

我试图制作一个包裹一些组件的组件，并向内容添加 animation 延迟，这工作正常，但 styles 不是从其中的代码继承的。 到目前为止，这是我的代码：

如何调用组件：

 <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 属性“全部”

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;
`;