Reactjs 样式化组件：在新组件内替代组件样式

我试图在另一个组件中覆盖组件的样式

// Component A
import React from "react";

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

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

// Component B
import React from "react";

export default () => (
    <CustomA>
      /* content */
    </CustomA>
  )
);

const CustomA = styled(<A />)`
  ${Header} {
    padding-left: 20px;
  }
`;

所以，我有一个组件a，里面有一些div（包装器，头）。 在一个新组件中，我试图覆盖组件a。在该覆盖中，我希望标题组件有一些新的样式。我知道我可以在同一个组件中引用组件，但我找不到有关在新组件中引用的任何信息

// Component A
import React from "react";

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

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

// Component B
import React from "react";

export default () => (
    <CustomA>
      /* content */
    </CustomA>
  )
);

const CustomA = styled(<A />)`
  ${Header} {
    padding-left: 20px;
  }
`;

//组件A
从“React”导入React；
导出默认值({
类名，
标题
}) => (
{title}
)
);
const Header=styled.h2`
左侧填充：0；
`;
//B部分
从“React”导入React；
导出默认值（）=>(
/*内容*/
)
);
const CustomA=styled（）`
${Header}{
左侧填充：20px；
}
`;

我希望头被更改，但我得到“头未定义”。

试试看

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

---

首先，您需要使用

样式化的
，如下所示：

const CustomA = styled(A)``;

而不是

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

有几个问题需要解决

您可以继续使用CodeSandbox

1.从组件A导出
标题
组件
您需要使
标题
组件在
组件A
之外可用，以便它可以在
组件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>
);


最后一个问题是，您没有传递
标题
（我在
组件A
中也做了
className=“
，使其成为可选的）

虽然这个代码片段可能是解决方案，但它确实有助于提高文章的质量。请记住，您将在将来回答读者的问题，这些人可能不知道您的代码建议的原因。谢谢！这就解决了！我错过了{Header}的导入。@Henrikfischebjellan很高兴它起作用了
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" />;