style组件主题在TypeScript中作为发布的NPM包

Question

我正在创建一个包含样式组件主题的NPM包，用于任何消费应用中提供颜色，单位等。

我已经创建了一个styled.d.ts来扩展DefaultTheme类型，这使得自动完成工作在我的包所在的仓库中(与Storybook一起)。到目前为止一切顺利。

然而，在发布了安装了我的包并导入了主题的应用程序之后，它没有任何自动完成功能，因为它没有意识到它正在使用的主题的类型。

如何在包中设置要使用的类型?使用我的包的应用程序如何意识到主题类型并在创建新样式组件时提供自动完成?

Answer 1

您是否在您的styled.d.ts中导出主题类型如下:

import type { themeObject } from './themes/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 };
...
`;