当我在样式组件中使用主题时,我尝试添加 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 问题,但仍不确定原因
对于仍然遇到此问题的任何人,您可能缺少一个步骤:将
.d.ts
文件添加到 "include"
文件的 tsconfig.json
数组中。所以所有步骤都是:
styled.d.ts
文件(名称并不重要)添加到您的"include"
数组中tsconfig
文件完成此设置后,您的主题将具有自动完成功能!