Reactjs SCS到样式化组件转换警告

在一个项目中，我使用了SCSS，在那里我编写了这段代码，它的工作方式很有魅力：

.container {
  padding: 0 1rem;
  .container {
    padding: 0;
  }
}

现在，我正在启动另一个使用样式化组件的项目。所以，我在这里写了这些风格：

const Container = styled.div`
  padding: 0 1rem;
  ${Container} {
    padding: 0;
  }
`;

现在我从编译器那里得到一个警告：

Container was used before it was defined.

我希望忽略此警告，而不对eslint文件进行任何更改或禁用行本身的eslint。我也不想用var代替const。

另外，我不愿意在div上使用一个类，然后在这里再次使用它。（如果我没有找到更好的方法来做这件事，我会认为这是最后的选择）。<强> < /P>

---

是否有更好的方法可以更改此代码以忽略此警告？

如果我理解您的问题，您似乎希望引用相同的容器组件。使用

和
返回到主部件


const Container = styled.div`
  padding: 0 1rem;
  & {
    padding: 0;
  }
`;