使用样式组件扩展样式不起作用

Question

我正在尝试使用 styled-components 扩展 React 组件的样式，但无法正常工作。 AFAIK，我正在以正确的方式进行操作，但也许我遗漏了一些东西...... 这是我拥有的：

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;

当然，预期的结果是在 p 上有一个红色背景，但现在输出看起来像这样：

知道如何解决这个问题吗？可能我遗漏了什么，但我不知道是什么。

提前致谢！

Answer 1

如文档中所述：

The styled method works perfectly on all of your own or any third-party components, as long as they attach the passed className prop to a DOM element.

例子

// 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>
);

参考：https://www.styled-components.com/docs/basics#styling-any-component

Answer 2

我不知道这是一种方法。我会这样做：

    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>
)
}

使用样式组件扩展样式不起作用

Extending styles with styled-components not working

css

reactjs

styled-components