样式系统自定义断点

【问题标题】：styled-system Custom Breakpoints样式系统自定义断点
【发布时间】：2021-05-12 14:06:01
【问题描述】：

我想指定我自己的自定义断点。 https://styled-system.com/responsive-styles/#using-objects 的文档仅引用 theme.js。

但我不明白我在哪里放置theme.js？或找到它？以及如何将其导入项目？以及如何使用别名定义断点并使用普通对象作为值。？

有人可以指导我吗？我在 Gatsby.js 中使用 styled-system

【问题讨论】：

【解决方案1】：

您只需导出一个名为breakpoints 的密钥。在我的项目中，我们使用一个 js 文件来定义我们的主题，它看起来像这样

export const breakpoints = ['769px', '1367px'];

由于您使用的是 Gatbsy，您需要安装gatsby-plugin-theme-ui。您的主题文件将是src/gatsby-plugin-theme-ui/index.js。

【讨论】：