reactjs - 动态更改 Redux-toolkit Global Store 中的 Material UI 主题

Question

我正在使用 Redux-toolkit 和material-ui 来构建我的react-app。在我的 index.js 页面上，我定义了主题，然后使用 ThemeProvider 包装我的应用程序组件。我的目标是让主题提供者从我的 redux 工具包商店读取主题类型(深色/浅色)。所以我的问题是如何访问index.js页面上的redux存储。这是因为我不确定是否可以在索引页上使用 useSelector Hook 。下面是我的 redux 存储和我的 index.js

/* eslint-disable react/jsx-filename-extension */
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import { createTheme, ThemeProvider } from '@material-ui/core/styles';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';
import CssBaseline from '@material-ui/core/CssBaseline';
import App from './App/App';
import reportWebVitals from './reportWebVitals';
import { store, persistor } from './redux/reduxStore';
import swDev from './swDev';

const theme = createTheme({
  palette: {
    type: 'light',
    primary: {
      main: '#6C7FD8',
      light: '#e7e9f8'
    },
    secondary: {
      main: '#FFFFFF'
    },
    red: {
      main: '#FF1744'
    }
  },
  typography: {
    h1: {
      fontSize: '4rem'
    },
    h2: {
      fontSize: '3rem'
    },
    h3: {
      fontSize: '2rem'
    },
    h4: {
      fontSize: '1.5rem'
    },
    h5: {
      fontSize: '1.3rem'
    },
    h6: {
      fontSize: '1rem'
    },
    button: {
      textTransform: 'none'
    }
  }
});

const themeChange = () => {
  theme.palette.type = 'light';
  console.log(theme);
};

ReactDOM.render(
  <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      <ThemeProvider theme={theme}>
        <CssBaseline />
        <App />
      </ThemeProvider>
    </PersistGate>
  </Provider>,
  document.getElementById('root')
);

reportWebVitals();

// Register the service worker
// swDev();

Answer 1

只需创建一个组件并调用 useSelector 即可使用 useSelector 从商店获取 theme

<PersistGate loading={null} persistor={persistor}>
  <AppContainer />
</PersistGate>

const AppContainer = () => {
  const themeType = useSelector((state) => state.themeState.theme);

  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <App />
    </ThemeProvider>
  );
};