使用样式化组件来自父组件的javascript样式子组件

hwazgwia 于 2021-09-13 发布在 Java

关注(0)|答案(2)|浏览(362)

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

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

我正在导入标题并在jsx中使用它。我想要的是从父组件设置标题组件的样式。我尝试了以下使用样式化组件的样式，但不知何故它不起作用。

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

这是代码沙盒。
https://codesandbox.io/s/dreamy-brown-w3bbs?file=/src/app.js:0-277
我如何才能使这项工作，或者如果你有更好的想法，请分享。

JavaScript Html reactjs css styled-components

来源：https://stackoverflow.com/questions/68304790/style-child-component-from-parent-component-using-styled-components

2条答案

按热度按时间

unguejic1#

希望我是按照你想做的，但在你的主要风格中，你可以只针对h1的标题？

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

或者，如果您不想以所有h1为目标，然后将类名添加到头中，我在这里添加了几种方法：https://codesandbox.io/s/clever-stallman-bdwfk?file=/src/app.js

赞(0）回复(0）举报 2021-09-13

sg3maiej2#

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

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

赞(0）回复(0）举报 2021-09-13

我来回答

使用样式化组件来自父组件的javascript样式子组件

2条答案

相关问题

热门标签

最新问答