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

如文档所述：

样式化的方法可以完全独立或完全适用第三方组件，只要它们附加了传递的className prop 到DOM元素。

示例

                [0] => stdClass Object
                    (
                        [ID] => 3
                        [CreatedAt] => 2019-01-09T01:31:49-08:00
                        [UpdatedAt] => 2019-01-09T01:31:49-08:00
                        [DeletedAt] => 
                        [FriendKey] => jFF4tzj5ZG9Vh3l8X6ek6s-JdTWz0_QcrKVYfWrzqgk=
                        [SenderId] => 7
                        [RecieverId] => 1
                        [Reciever] => stdClass Object
                            (
                                [ID] => 0
                                [CreatedAt] => 0001-01-01T00:00:00Z
                                [UpdatedAt] => 0001-01-01T00:00:00Z
                                [DeletedAt] => 
                                [FirstName] => 
                                [MiddleName] => 
                                [LastName] => 
                                [Email] => 
                                [UserName] => 
                                [Status] => 0
                            )

                        [Status] => 0
                    )

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

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

使用样式化组件无法扩展样式

2 个答案: