javascript - 如何将其转换为样式化的组件以及如何嵌套类

我从使用样式化组件作为主要库的css-in-js开始，但有两个问题。

第一个问题，如何嵌套类？

footer{
  color: red;
}

footer p{
  padding: 16px 8px;
  font-size: 30px;
}

  <footer>
    <div className="container">
      <p>&copy; 1997-2015,All rights reserved.</p>
    </div>
  </footer>

我的第二个问题是，我有一个div，它使用2个类，一个是来自bootstrap的容器，另一个是我自己的自定义类，而且我不知道如何将这2个类连接到样式化组件中。

最佳答案

const MyStyledComponent = styled.footer`
  & > div {
    color: red;
  }

  & > div > p {
    padding: 16px 8px;
    font-size: 30px;
  }
`;

将＆视为“此元素”。



有两种将类添加到样式化组件的方法。一种就是只需添加className属性

<StyledComponent className="container my-class" />

或者，如果您想在应用程序的每个位置使用这些类，则可以通过设置样式化组件的属性来为其设置默认类。

const StyledComponent = styled.div.attrs({
 className: 'container my-class',
})`
  color: #f00;
`;

关于javascript - 如何将其转换为样式化的组件以及如何嵌套类，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52336459/