使用已样式化的零部件从父零部件样式化子零部件

Question

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

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组件。我尝试了以下使用样式组件的样式，但不知何故它不起作用。

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

这是代码沙盒。

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

我如何才能做到这一点，或者如果你有更好的想法，请分享。

Answer 1

您不需要任何全局类名或选择DOM元素，这两种做法都是明显的不良做法。相反，只需使用"；样式"；在其父组件内部的子组件上。因此，例如，在您的情况下：

import Header from "./header";
import styled from "styled-components";
const StyledHeader = styled(Header)`
background-color: "red";
`;
export default function App() {
return (
<Main className="App">
<StyledHeader />
</Main>
);
}

同样重要的是要注意：JS工具中的一些CSS将需要您手动在子组件的道具中添加className道具，才能正常工作。因此，例如，您的Header组件必须变为：

const Header = ({ className }) => <HeaderContainer className={className}>This is Header</HeaderContainer>;

你不需要自己从父组件传递这个道具，JS工具中的CSS会自动传递这个className。

Answer 2

希望我遵循您想要做的，但在您的Main样式中，您可以只针对标头的h1？

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

或者，如果你不想针对所有H1，那么在你的头中添加一个className，我在这里添加了一些方法：https://codesandbox.io/s/clever-stallman-bdwfk?file=/src/App.js

Answer 3

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

1. 内联样式：

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

2. 外部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 />
   </>
   }