样式化-系统自定义断点

Question

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

但是我不知道该把theme.js放在哪里？还是找到它？如何将其导入到项目中？如何使用别名定义断点并使用普通对象作为值？

有没有人能给我带路？我在Gatsby.js中使用styled-system

Answer 1

您只需要导出一个名为breakpoints的密钥。在我的项目中，我们使用js文件来定义主题，如下所示

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

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