我们想用useTheme from @emotion/react在库内和我们的应用程序内

我们正在使用： -反应本机网络 -nx monorepo -反应本机

这是我们的结构

 -apps
  --web (ReactJS)
  --mobile (React-native)
 -libs
  --shared-ui
    --components
    --theming

当我们想在应用程序中使用 useTheme 时，我们必须像这样声明 Theme

import '@emotion/react';
import { ThemeType } from '@awesomeapp-frontend/ui';

declare module '@emotion/react' {
  export interface Theme extends ThemeType {}
}

然后将其放入提供者中：

import { light } from '@awesomeapp-frontend/ui';

...
root.render(
  <StrictMode>
    <ThemeProvider theme={light}>

但此声明仅适用于 Web 应用程序，我们现在可以使用 ThemeType 的定义

.... // type for theme
export type ThemeType = {
  colors: {
    primary: string;
    myOwnColor: string;
  };
};

.... // in component
const App = () => {
  const theme = useTheme();
  console.log('THEME IN COMPONENT: ', theme);

  return <div style={{ color: theme.colors.primary }}>Oi, I am web app</div>;
...

问题是我们如何使用这种类型ThemeProvider在lib文件夹中 当我注销时 useTheme 数据就在那里

{
colors: {
 primary: 'red'
 myOwnColor: 'blue'
}
}

但打字稿不知道这一点并抱怨...我如何设置全局类型以使情感也可以在 lib 文件夹中使用？

我不确定我是否正确理解您的问题，但是，您似乎正在努力共享库内的类型。因此，我建议再创建一个仅用于类型的库，并在该库中定义所有类型并在其他库中使用它们。

像这样，

• common（仅适用于类型的库）
• 通用 API（API 类型的库，它将扩展公共库中的大多数类型）
• ui-通用（UI 类型的库，它将从公共库扩展大多数类型）

就像我有一个带有 React 和 MongoDB 的应用程序，我必须共享类型，但问题是在 API 方面， _id 字段类型是 ObjectId ，而前端的字符串我已经做了类似的事情。

公共库中的 Address.ts。

export class AddressWithoutIds {
    public city: string = '';
    public postalCode: string = '';
}

api-common 库中的 Address.ts。

export class Address extends AddressWithoutIds {
    public _id: ObjectId;
}

ui-common 库中的 Address.ts。

export class Address extends AddressWithoutIds {
    public _id: string;
}