TypeScript 中的样式化组件主题作为已发布的 NPM 包

Question

我正在创建一个 NPM 包，其中包含样式化组件主题，可在任何消费应用程序中使用以提供颜色、单位等。

我创建了一个

styled.d.ts

来扩展

DefaultTheme

类型，这使得自动完成功能在我的包所在的存储库（带有 Storybook）中按预期工作。到目前为止一切都很好。

但是，在发布安装了我的包并导入主题的应用程序后，没有任何自动完成功能，因为它不知道所使用的主题的类型。

如何设置要使用的包中的类型？使用我的包的应用程序如何了解主题类型并在创建新样式组件时提供自动完成功能？

Answer 1

您是否像这样导出

styled.d.ts

中的主题类型：

import { themeObject } from './my-theme';

type AppTheme = typeof themeObject;

declare module '@emotion/react' {
  // eslint-disable-next-line @typescript-eslint/no-empty-interface
  export interface Theme extends AppTheme {}
}

我认为它可能会有所不同，具体取决于您用于创建样式组件的 npm 包？我正在使用

emotion

，它有一个辅助方法

styled

，我用它来创建我的组件，如下所示：

import { css, Theme } from '@emotion/react';
import styled from '@emotion/styled';

export const StyledDiv = styled.div<{
  variant,
  theme,
}: {
  variant: DivVariants;
  theme: Theme;
}>`
  color: blue
  padding: 1rem;
  background-color: ${({ theme }) => theme.colours.primary };
  ...
`;