scss到样式组件转换警告

Question

在一个项目中，我使用的是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上使用一个类，然后在这里再次使用它。 （如果找不到更好的方法，我会认为这是最后的选择。）

还有什么更好的方法可以更改此代码以忽略此警告？

Answer 1

如果我理解您的问题/问题，似乎您想引用相同的容器组件。使用&来参考主要组件。

Using pseudoelements, pseudoselectors, and nesting

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