样式化的组件：在新组件内覆盖组件样式

Question

我正在尝试覆盖另一个组件内部的组件样式。

因此，我有一个组件A，内部有一些div（包装器，页眉）。 在一个新组件中，我尝试覆盖组件A。在该覆盖内部，我希望Header组件具有一些新样式。我知道我可以在同一组件内引用一个组件，但是找不到关于在新组件内引用的任何信息。

EFAST

我希望可以更改标题，但会收到“未定义标题”的信息。

Answer 1

尝试

const CustomA = styled(A)`
    padding-left: 20px;
`;

Answer 2

首先，您需要使用如下样式。

const CustomA = styled(A)``;

的

const CustomA = styled(<A/>)``;

第二次尝试以下代码。

const CustomA = styled(A)`
  h2{
    padding-left: 20px;
  }
`;

我希望这会有所帮助。

Answer 3

有两个问题要解决。

您可以继续使用CodeSandbox。

1。从Header

导出Component A组件

您需要使Header之外的Component A组件可用，以便可以在Component B中引用它。

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

export const Header = styled.h2`
  padding-left: 0;
`;

export default ({ className = "", title }) => (
  <div className={className}>
    <Header>{title}</Header>
  </div>
);

2。 Component B

中的错误

这里有三个问题。

1. 您需要将组件名称而不是实例传递给styled()函数。

代替const CustomA = styled(<A />)，其中<A />是实例，
做const CustomA = styled(A)。

1. 您需要导入从Header导出的Component A组件。
   现在您可以在styled(A)中将其引用为$ {Header}。

   import styled from "styled-components";
   
   import A, { Header } from "./CustomA";
   
   const CustomA = styled(A)`
     ${Header} {
       padding-left: 20px;
     }
   `;
   
   export default () => <CustomA title="Component B Content" />;
   

2. 最后一个问题是，您没有传递title（我在className = ""中也做了Component A使其成为可选）。