无法将 styles 应用于 Reactjs 中的样式化组件元素

Question

我正在尝试使用styled-component div 包装组件并应用一些 styles。 但是，由于某种原因，styles 没有被应用，即使正在渲染预期要呈现的表面上正确的包装器。

代码沙盒

我在这里做错了什么？

Answer 1

您只是忘记传递 className 道具，请参见此处：

const Component = ({ className }) => (
  <div className={className}>Hello World!</div>
);

https://codesandbox.io/s/optimistic-lumiere-cq8gt?file=/src/App.js

我希望我对你有所帮助。 祝你有美好的一天。

编辑：在这里查看文档

Answer 2

您需要使用styled.{tag}或styled(Component)容器组件，然后使用该容器组件包装主要组件。

import React from "react";
import "./styles.css";
import styled from "styled-components";

export default () => <Component />;

const Component = () => <StyledDiv>Hello World!</StyledDiv>;

const StyledDiv = styled.div`
  font-size: 10rem;
  color: red;
  display: flex;
  justify-content: center;
  align-items: center;
`;

在这里查看： https://codesandbox.io/s/dank-hill-h8rbc?file=/src/App.js:128-189