react中emotion全局主題設置錯誤

Question

在設置emotion全局主題的過程中，反復出現引用未知屬性的錯誤。

import React from 'react';
import styled from '@emotion/styled';

const ThemeTest1 = styled.div`
  // Property 'colors' does not exist on type 'Theme'.
  color: ${props => props.theme.colors.red}; 
`;

const LogIn = () => {
  return (
    <>
      <div>login</div>
      <ThemeTest1 >theme test1</div>     
    </>
  );
};

export default LogIn;

當前項目使用的情感版本和設置全局主題的代碼如下。

// package.json
  "dependencies": {
    "@emotion/babel-plugin": "^11.10.5",
    "@emotion/react": "^11.10.5",
    "@emotion/styled": "^11.10.5",
    "@loadable/component": "^5.15.2",
    "@types/react": "^17.0.2",
    "@types/react-dom": "^17.0.1",
    "axios": "^0.26.1",
    "core-js": "^3.15.1",
    "cross-env": "^7.0.3",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "typescript": "^4.4.2"
  },
  "devDependencies": {
    "@babel/core": "^7.13.8",
    "@babel/preset-env": "^7.13.8",
    "@babel/preset-react": "^7.12.13",
    "@babel/preset-typescript": "^7.13.0",
    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.0-rc.0",
    "@types/fork-ts-checker-webpack-plugin": "^0.4.5",
    "@types/loadable__component": "^5.13.4",
    "@types/node": "^16.11.26",
    "@types/react-router-dom": "^5.1.7",
    "@types/webpack": "^5.28.0",
    "@types/webpack-dev-server": "^4.0.3",
    "babel-loader": "^8.2.2",
    "css-loader": "^6.2.0",
    "eslint": "^8.13.0",
    "eslint-config-prettier": "^8.1.0",
    "eslint-plugin-prettier": "^4.0.0",
    "fork-ts-checker-webpack-plugin": "^7.2.3",
    "prettier": "^2.2.1",
    "react-refresh": "^0.12.0",
    "style-loader": "^3.2.1",
    "ts-node": "^10.0.0",
    "webpack": "^5.24.2",
    "webpack-cli": "^4.5.0",
    "webpack-dev-server": "^4.0.0"
  }
}

// styles/theme.tsx
import { Theme } from '@emotion/react';

const theme: Theme = {
  size: {
    tablet: '640px',
    laptop: '1200px',
    desktop: '1800px',
  },
  colors: {
    red: '#f26462',
    primaryGray: '#3f4150',
    border: '#EFEFEF',
    selected: '#f2f2f2',
  },
  calcRem: (pxSize: number) => {
    `${pxSize / 16}rem`;
  },
  flexSet: (just = 'center', align = 'center') => {
    return `display: flex;
    justify-content: ${just};
    align-items: ${align};`;
  },
  flexColumnSet: (just = 'center', align = 'center') => {
    return `display: flex;
    flex-direction: column;
    justify-content: ${just};
    align-items: ${align};`;
  },
};

export default theme;

// styles/emotion.d.tsx
import '@emotion/react';

declare module '@emotion/react' {
  export interface DefaultTheme {
    size: {
      tablet: string;
      laptop: string;
      desktop: string;
    };
    colors: {
      red: string;
      primaryGray: string;
      border: string;
      selected: string;
    };
    calcRem: string;
    flexSet: string;
    flexColumnSet: string;
  }
}

// client.tsx
import 'core-js/stable';
import 'regenerator-runtime/runtime';
import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import { ThemeProvider } from '@emotion/react';
import axios from 'axios';

import App from './layouts/App';
import GlobalStyle from './styles/global';
import theme from './styles/theme';

axios.defaults.withCredentials = true;
axios.defaults.baseURL =
  process.env.NODE_ENV === 'production' ? 'https://sleact.nodebird.com' : 'http://localhost:3090';

render(
  <BrowserRouter>
    <ThemeProvider theme={theme}>
      <GlobalStyle />
      <App />
    </ThemeProvider>
  </BrowserRouter>,
  document.querySelector('#app'),
);

我好像已經正常完成設置了，但是出現如下錯誤是什么原因呢？

Answer 1

我通過將 emotion.d.tsx 設置為 DefaultTheme 以外的主題解決了這個問題。