Question

我正在尝试使用styled-component div包装一个组件并应用一些样式。但是，由于某种原因，即使正在渲染预期表面上正确的包装器，也未应用样式。

我在做什么错了？

Answer 1

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

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

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

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

编辑：Check the docs here

Answer 2

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

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

无法将样式应用于React.js中的样式组件元素

2 个答案: