重构后样式组件停止工作

Question

styled-components 停止工作。 我可以毫无问题地使用样式组件， 但是在完成重构（创建子组件）之后， 突然一些样式化的组件停止工作。

import React from "react"; 
import ReactDOM from "react-dom";
import MainWindow from "./components/mainWindow";
import SubWindow from "./components/subWindow";
import "./index.css";
import styled from "styled-components";

const Container = styled.main`
display: flex;
`;

const App = () => {
 return (
 <Container>
   <MainWindow />
   <SubWindow />
 </Container>
 );
};

ReactDOM.render(<App />, document.querySelector("#root"));

styled-components 将类名分配给主标签，但是当我检查标签时，如下所示， 尽管我为 Container 组件分配了样式“display: flex”，但没有应用样式。 Devtool says no styled is applied to Container component.

我试过了：

• 更改组件的名称。
• 卸载并重新安装 styled-components。
• 多次检查语法。

Answer 1

使用以下内容，我能够毫无问题地渲染组件和样式：

import React from "react";
import ReactDOM from "react-dom";
import styled from "styled-components";

const Container = styled.main`
  background: red;
  display: flex;
`;

const App = () => {
  return <Container>foo</Container>;
};

ReactDOM.render(<App />, document.getElementById("container"));

版本：

• 反应：17.0.1
• ReactDOM：17.0.1
• 样式化组件：5.2.1