为样式组件主题添加 IntelliSense

问题描述 投票:0回答:2

当我在样式组件中使用主题时,我尝试添加 IntelliSense。

这是我的

index.tsx
文件,我在其中使用
ThemeProvider

import React from 'react';
import ReactDOM from 'react-dom/client';
import { ThemeProvider } from 'styled-components';
import App from './App';
import { GlobalStyle } from './style/globalStyle';
import { theme } from './theme/theme';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement,
);

root.render(
  <React.StrictMode>
    <ThemeProvider theme={theme} >
      <GlobalStyle />
      <App />
    </ThemeProvider>
  </React.StrictMode>,
);

如果相关的话,我还有一个

theme.d.ts
文件:

// import original module declarations
import 'styled-components';
import { theme } from './theme';

// and extend them!
declare module 'styled-components' {
  export type Theme = typeof theme;
  // eslint-disable-next-line @typescript-eslint/no-empty-interface
  export interface DefaultTheme extends Theme {}
}

到目前为止,我还没有成功让 IntelliSense 识别我的主题中的元素。有谁知道如何实现这一目标?

解决方案

基于this文章,我已将 theme.ts 更改为

export const theme = {...}

export type Theme = typeof theme;

const theme = {...}

export default theme;

另外,我已将 theme.d.ts 更改为

// import original module declarations
import 'styled-components';
import { Theme } from './theme';

// and extend them!
declare module 'styled-components' {
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 export interface DefaultTheme extends Theme {}
}

它解决了我的 IntelliSense 问题,但仍不确定原因

typescript styled-components react-typescript
2个回答
1
投票

您的模块增强应该可以正常工作(即使甚至不需要导入原始模块)。

样式组件文档 > TypeScript > 主题

您的代码示例与上述文档不同,因为它根据实际的

DefaultTheme
值创建
theme
接口,但它也可以正常工作: 游乐场链接

但请确保您明确

import
您的
theme.d.ts
文件:因为它
import
是其他一些文件,它不是“环境脚本”,必须先导入才能生效。


0
投票

对于仍然遇到此问题的任何人,您可能缺少一个步骤:将

.d.ts
文件添加到
"include"
文件的
tsconfig.json
数组中。所以所有步骤都是:

  • 按照官方指南创建自定义主题
  • 将创建的
    styled.d.ts
    文件(名称并不重要)添加到您的
    "include"
    数组中
    tsconfig
    文件

完成此设置后,您的主题将具有自动完成功能!

© www.soinside.com 2019 - 2024. All rights reserved.