Typechecking与样式组件的反应库

Question

我目前正在一个设计系统库中工作，以测试一些东西。基本上，为了创建主题，库是一个样式化的组件包装器。我建立了这个库的类型记录，反应，样式组件和卷取作为邦德勒。

问题是当用户使用这个库时，vscode对主题声明的排版没有帮助。

这是库中的index.js。基本上是一个临时的，其中我们有一个上下文和一个来自样式组件的ThemeProvider临时。

import { createContext, useState } from "react";
import "styled-components";
import {
  DefaultTheme,
  ThemeProvider as SCThemeProvider,
} from "styled-components";
import { themes } from "./design-system/colorTheme";
import React from "react";

interface ThemeContextAPI {
  toggleTheme: () => void;
  currentTheme: DefaultTheme;
}

const ThemeContext = createContext<ThemeContextAPI | null>(null);

const ThemeProvider: React.FC<{ children?: React.ReactNode }> = ({
  children,
}) => {
  const [currentTheme, setCurrentTheme] = useState<DefaultTheme>(themes.light);

  const toggleTheme = () => {
    setCurrentTheme((prev) =>
      prev === themes.light ? themes.dark : themes.light
    );
  };

  const values: ThemeContextAPI = {
    toggleTheme,
    currentTheme,
  };

  return (
    <ThemeContext.Provider value={values}>
      <SCThemeProvider theme={currentTheme}>{children}</SCThemeProvider>
    </ThemeContext.Provider>
  );
};

export default ThemeProvider;
export { ThemeContext };

正如我们所看到的，我们有一个SCThemeProvider，它是一个来自样式组件的ThemeProvider组件。这给用户带来了，在所有样式组件中使用所有主题变量。此组件提供的主题如SC文档所述进行了扩展，因此DefaultTheme声明如下：

export interface Theme {
  primary?: Color;
  primaryContainer?: Color;
  secondary?: Color;
  secondaryContainer?: Color;
  tertiary?: Color;
  tertiaryContainer?: Color;
  cuaternary?: Color;
  cuaternaryContainer?: Color;
  // -------------
  surface?: Color;
  surfaceVariant?: Color;
  background?: Color;
  error?: Color;
  errorContainer?: Color;
  // -------------
  onPrimary?: Color;
  onPrimaryContainer?: Color;
  onSecondary?: Color;
  onSecondaryContainer?: Color;
  onTertiary?: Color;
  onTertiaryContainer?: Color;
  onCuaternary?: Color;
  onCuaternaryContainer?: Color;
  // --------------
  onSurface?: Color;
  onSurfaceVariant?: Color;
  onError?: Color;
  onErrorContainer?: Color;
  onBackground?: Color;
  outline?: Color;
  // --------------
  inverseSurface?: Color;
  inverseOnSurface?: Color;
  inversePrimary?: Color;
  colorPalette: ColorPalette<ColorSet>;
  surfaceTones: SurfaceTones;
}

declare module "styled-components" {
  export interface DefaultTheme extends Theme {}
}

库是这样使用的(示例是用next.js编写的)：

import { GlobalStyle, ThemeProvider } from "rakes-design-sys";

function MyApp({ Component, pageProps }) {
  return (
    <>
      <ThemeProvider>
        <GlobalStyle />
        <Component {...pageProps} />
      </ThemeProvider>
    </>
  );
}

export default MyApp;

但是当我在一个样式化的组件中使用主题时，vscode没有显示主题的类型。我已经将TS配置配置为创建声明文件，但仍然无法工作。我只是把它放在tsconfig和rollupconfig中。

    "declaration": true,
    "declarationDir": "types",
    "emitDeclarationOnly": true

在我的汇总配置中，我使用这样的rollup plugin-dts

 {
    input: "dist/types/index.d.ts",
    output: [{ file: "dist/index.d.ts", format: "es" }],
    plugins: [dts()],
  },

这将在dist中生成一个名为types的文件夹，其中包含库中的所有文件，但具有.d.ts扩展，并在dist中创建另一个index.d.ts。

通过这种方式，当我使用上下文时，类型化工作如下：

import { ThemeContext } from "rakes-design-sys";
import { useContext, useEffect } from "react";
import { OHeader } from "../styles/organisms/OHeader.styles";

const App = () => {
  const { toggleTheme, currentTheme } = useContext(ThemeContext);
  console.log(currentTheme.primaryContainer);
  return <OHeader onClick={() => toggleTheme()}>HelloWorld</OHeader>;
};

export default App;

在console.log(currentTheme.something)中，打字机正在工作，但在这样的styledComponent内部却不能工作。

import styled from "styled-components";

export const OHeader = styled.div`
  background-color: ${(props) => props.theme.primary};
`;

它已经开始工作了，但是当我编写props.theme.something时，它不会预测或键入样式组件提供的当前主题中的值。

Answer 1

样式组件的提供程序上下文充当单例。因此，当您从库中和消费应用程序中的样式组件导入时，主题上下文不匹配。

若要修复使样式化组件成为库中对等依赖项的问题，请执行以下操作。