reactjs - NX Monorepo 和库中的情感主题

Question

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

我们正在使用:-react-native-web-nx 单体仓库- native react

这是我们的结构

 -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}>

但此声明仅适用于网络应用，我们现在可以使用我们对 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>;
...

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

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

但 typecrypt 不知道并提示...我如何设置全局类型以使 emotin 在 lib 文件夹中也可用？

Answer 1

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

像这样，

• common(仅限类型的库)
• api-common(API 类型的库，它将扩展公共(public)库中的大多数类型)
• ui-common(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 lib 中的 Address.ts.

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