如何在样式组件中实现 CSS 混合？

Question

我在我的项目中使用了一些基类，例如 text-lg、text-md...、.container 等。 通常我是这样写的：

<div class="article text-lg container">some content</div>

如何使用 styled-components 做这样的事情？为这些类创建 mixin，或者只是混合使用 styled-components 和 css 类？

Answer 1

您可以使用css helper 创建您的基类并将它们组合起来。

const container = css`
  padding: 20px;
`;
const article = css`
  max-width: 1920px;
`;
const textLg = css`
  font-size: 3rem;
`;

const CustomDiv = styled.div`
  ${container + article + textLg}

  /* other styles here */
  background: black; 
  color: white;
`;

---

或者，如果您已经有一个现有的样式表（例如 CSS 库，如 Bootstrap），您可以使用 attrs 将它们组合起来。这可以节省您在 JS 中重写 CSS 的时间。在此处阅读官方文档：https://styled-components.com/docs/faqs#can-i-use-css-frameworks

const CustomDiv = styled.div.attrs(props => ({
  className: "article text-lg container",
}))`
  /* other styles here */
  background: black; 
  color: white;
`;

基本上，输出将是您自定义生成的类，其中包含background 和color CSS 属性，以扩充您的样式表中定义的article、text-lg 和container 类