标签: theme-ui

Box我正在尝试在新项目上制作通用的反应组件。这将是所有其他组件的基础。我使用 styled-system、emotion 以及最终的 theme-ui 来处理所有组件的主题和样式。

我的根Box组件如下所示：

import styled from '@emotion/styled';
import {
  compose,
  space,
  layout,
  flexbox,
  border,
  position,
  color,
  SpaceProps,
  ColorProps,
  LayoutProps,
  FlexboxProps,
  BorderProps,
  PositionProps,
} from 'styled-system';

export type BoxProps = SpaceProps &
  ColorProps &
  LayoutProps &
  FlexboxProps &
  BorderProps &
  PositionProps;

export const Box = styled.div<BoxProps>(
  {
    boxSizing: 'border-box',
    minWidth: 0,
  },
  compose(space, color, layout, flexbox, border, position)
);

我使用 styled-system 中的 styled 函数及其关联类型来创建一个接受空间、颜色、布局、flexbox、边框和位置属性的 Box 组件。

我收到的错误仅发生在color道具上。一旦我删除它，我就不会收到任何错误。

TS 错误为：

Type 'BoxProps' does not …

我正在使用Next.js 12 ，在使用theme-ui创建主题后弹出此错误

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: E:\fm-nextjs\node_modules\@mdx-js\react\index.js
require() of ES modules is not supported.
require() of E:\fm-nextjs\node_modules\@mdx-js\react\index.js from E:\fm-nextjs\node_modules\@theme-ui\mdx\dist\theme-ui-mdx.cjs.dev.js 
is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from E:\fm-nextjs\node_modules\@mdx-js\react\package.json.

    at Object.Module._extensions..js …