使用 styled-components 从父组件设置子组件的样式答案

【问题标题】：Style child component from parent component using styled-components使用 styled-components 从父组件设置子组件的样式
【发布时间】：2021-09-19 02:33:57
【问题描述】：

我有一个父组件和一个子组件。我将子组件导入父组件并在那里使用它。下面是子组件。

import styled from "styled-components";

const HeaderContainer = styled.h1``;
const Header = () => <HeaderContainer>This is Header</HeaderContainer>;
export default Header;

如您所见，它是一个简单的组件，它只呈现文本。

父组件在下面。

import "./styles.css";
import Header from "./header";
import styled from "styled-components";

const Main = styled.div`
  ${Header} {
    background-color: "red";
  }
`;

export default function App() {
  return (
    <Main className="App">
      <Header />
    </Main>
  );
}

我正在导入 Header 并在 JSX 中使用它。我想要的是从父组件中设置 Header 组件的样式。我使用 styled-components 尝试了以下样式，但它无法以某种方式工作。

const Main = styled.div`
  ${Header} {
    background-color: "red";
  }
`;

这里是代码框。

https://codesandbox.io/s/dreamy-brown-w3bbs?file=/src/App.js:0-277

我怎样才能完成这项工作，或者如果您有更好的想法，请分享。

【问题讨论】：

"index.js:27 Header 不是样式化组件，不能通过组件选择器引用。有关详细信息，请参阅styled-components.com/docs/…。"
@jonrsharpe 我刚刚更新了代码框。我忘了让它成为样式组件。
但是你不是指HeaderContainer，你指的是Header，所以仍然显示相同的警告。阅读控制台消息和链接到的文档。
@jonrsharpe 在文档中，两个组件的样式都在同一个文件中，因此我们可以引用该组件。在我的情况下，标题组件位于不同的文件中。它有一个 HeadeContainer 样式，我在 JSX 中使用它。但我将组件导出为页眉。我在父组件中导入为 Header 而不是 HeaderContainer。所以我不能将它称为 HeaderContainer，因为它是未定义的。我只能将其称为 Header。
我并不是说你应该指代 HeaderContainer，必然只是那个 Header，你实际上指的组件，不是样式化组件。这就是警告告诉你的内容，大概也是它不起作用的原因。

标签： javascript html css reactjs styled-components

【解决方案1】：

希望我在关注您想要做的事情，但是在您的主要样式中，您可以只针对标题的 h1 吗？

const Main = styled.div`
    h1 {
        background-color: red;
    }
`;

或者，如果您不想针对所有 H1，则在标题中添加一个 className，我在这里添加了几种方法：https://codesandbox.io/s/clever-stallman-bdwfk?file=/src/App.js

【讨论】：

我刚刚更新了 header.js 文件的代码框并将该标头转换为样式化组件。现在您的解决方案不起作用。
您需要将样式添加到样式化组件而不是反应组件。我用一些可能的解决方案更新了我的沙盒。

【解决方案2】：

在您的代码中，您尝试设置标题样式的部分是错误的。相反，您可以并且应该尝试的是：

内联样式：

import "./styles.css";
import Header from "./header";
import styled from "styled-components";

export default function App() {
  return (
    <Main className="App">
      <Header style={{background-color: "red"}}/>
    </Main>
  );
}

外部 CSS

您可以为组件内的元素指定类名，并在父文件中设置它们的样式，如下所示

css文件，我们命名为style.css

.header-heading {
  font-size: 4rem;
  color: "red";
}

子组件

const Header = function () {
  return (
    <h1 className="header-heading">This is the heading</h1>
  );
}

export default Header;

然后你可以将它们都导入到父文件中，你会看到子组件现在被样式化了。

父组件

import React from "react";
import Header from "./Header";

import "./style.css";

const App = function () {
  <>
    <h1>Below is the h1 component rendered</h1>
    <Header />
  </>
}

【讨论】：