从 Redux-toolkit Global Store 动态更改 Material UI 主题

Question

我正在使用 Redux-toolkit 和 material-ui 来构建我的 react-app。在我的 index.js 页面上，我定义了主题，然后用 ThemeProvider 包装了我的 App 组件。我的目标是让主题提供者从我的 redux 工具包商店中读取主题类型（深色/浅色）。所以我的问题是如何访问 index.js 页面上的 redux 存储。这是因为我不确定是否可以在索引页面上使用 useSelector 挂钩。下面是我的 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>
  );
};