Css 使用已设置样式的组件扩展样式无效

我正在尝试使用

样式化组件扩展react组件的样式，但不起作用。
好吧，我做得很对，但也许我错过了什么。。。
以下是我所拥有的：

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

const TextContainer = ({ text }) => {
  return <p dangerouslySetInnerHTML={{ __html: text }} />;
};

const Paragraph = styled(TextContainer)`
  background: red;
`;

class Home extends React.Component {
  render() {
    const { t } = this.props;
    return <Paragraph text="This is a test" />;
  }
}

export default Home;

从“React”导入React；
从“样式化组件”导入样式化；
const TextContainer=（{text}）=>{
return
；
};
const段落=样式化（TextContainer）`
背景：红色；
`;
类Home扩展了React.Component{
render（）{
const{t}=this.props；
返回；
}
}
导出默认主页；

当然，预期的结果是在
p
上有一个红色背景，但现在输出如下所示：


有没有办法解决这个问题？也许我错过了什么，但我不知道是什么

感谢是前进
 如文件所述：

样式化方法在您自己或任何其他应用程序上都能完美地工作
第三方组件，只要它们附加传递的类名即可
将映射到DOM元素

示例

// This could be react-router-dom's Link for example, or any custom component
const Link = ({ className, children }) => (
  <a className={className}>
    {children}
  </a>
);

const StyledLink = styled(Link)`
  color: palevioletred;
  font-weight: bold;
`;

render(
  <div>
    <Link>Unstyled, boring Link</Link>
    <br />
    <StyledLink>Styled, exciting Link</StyledLink>
  </div>
);

//例如，这可以是react路由器dom的链接，也可以是任何自定义组件
常量链接=（{className，children}）=>(
我不知道这是一种方法。
我会：

    const Link = styled.a`
    ..put you css styles here (className styles)
   `

   const StyledLink = styled(Link) `
      color: palevioletred;
      font-weight: bold;
   `

render(){
return(
<div>
    <Link>Unstyled, boring Link</Link>
    <br />
    <StyledLink>Styled, exciting Link</StyledLink>
  </div>
)
}

const Link=styled.a`
…在此处放置css样式（类名样式）
`
const StyledLink=已设置样式（链接）`
颜色：淡紫罗兰色；
字体大小：粗体；
`
render（）{
返回(
未定型、镗孔连杆


风格独特、令人兴奋的链接
)
}
我相信您有两件事弄糊涂了。根据文档，扩展是指当您拥有一个样式化组件并在此基础上创建一个新组件时。另一方面，当您为自己的组件设置样式时，您需要传递类名，正如下面有人所回答的那样。否则，样式化组件将不知道要使用哪个DOM元素将样式应用于：）这仅在同一文件中定义链接时有效，不要导入它您保存了我！！！巨大的thanx！