React项目中如何配置公共的颜色或属性

首先在App.tsx中配置：

import React, { Suspense, lazy, useEffect, useState } from 'react';
import { BrowserRouter, Route, Redirect } from 'react-router-dom';
import { Provider } from 'react-redux';
import store from './store';
import { ConfigProvider, Spin, Result, Button, Input, message } from 'antd';
import 'moment/locale/zh-cn';

import locale from 'antd/lib/locale/zh_CN';
import * as config from './config';

import RoutePath from './Route'
import { GlobalConfigProvider } from './GlobalConfig';

export default () => {
  let [glConfig, setGlConfig] = useState({ ...config });

  return <GlobalConfigProvider value={glConfig}>
    <ConfigProvider locale={locale}>
      <Provider store={store}>
        <RoutePath />
      </Provider>
    </ConfigProvider>
  </GlobalConfigProvider>
};

在GlobalConfig.tsx中封装 provider:

import * as React from 'react';

export const GlobalContext = React.createContext<any>({} as any);
export const GlobalConsumer = GlobalContext.Consumer;

interface ConfigValue {
    COLOR?: string
}
interface globalConfigProviderProps {
    value: ConfigValue,
    children: React.ReactNode
}
export const GlobalConfigProvider = (props: globalConfigProviderProps) => {
    return <GlobalContext.Provider value={props.value}>
        {props.children}
    </GlobalContext.Provider>
}

在子组件中使用COLOR属性： 例如： Child.tsx中：

export const GlobalContext = React.createContext<any>({} as any);

const Child = () => {
    let gConfig = useContext(GlobalContext);
    return (
         <div>{gConfig.COLOR}</div>
    )
}

export default Child;