Material ui 切换材质UI主题方向

我正在尝试使用MUI创建react应用程序。我想在应用程序的语言更改时更改MUI方向（即从“en”更改为“Ir”）。问题是，它们不是更新组件样式，而是被重写！ 以下是我如何完成的：

import React, { useMemo, useReducer, useLayoutEffect, useCallback, useContext } from 'react';
import { createMuiTheme, ThemeProvider as MUIThemeProvider } from '@material-ui/core';

const CHANGE_DIR = 'CHANGE_DIR';

const ThemeContext = React.createContext();

const initThemeOptions = { direction: 'rtl' };

// eslint-disable-next-line react/prop-types
function ThemeProvider({ children }) {

    const [{ direction }, dispatch] = useReducer((theme, action) => {

        switch (action.type) {

            case CHANGE_DIR:
                return {
                    ...theme,
                    direction: action.payload || theme.direction
                }

            default:
                return theme;

        }

    }, initThemeOptions);

    const theme = useMemo(() => createMuiTheme({ direction }), [direction]);

    useLayoutEffect(() => {
        document.body.dir = direction;
    }, [direction]);

    return (
        <MUIThemeProvider theme={theme}>
            <ThemeContext.Provider value={dispatch}>
                {children}
            </ThemeContext.Provider>
        </MUIThemeProvider>
    );

    }
    
    export default ThemeProvider;
    
    export const useChangeDirection = () => {
    
        const dispatch = useContext(ThemeContext);
    
        return useCallback(dir => dispatch({ type: CHANGE_DIR, payload: dir }), [dispatch]);
    };

import-React，{usemo，useReducer，useLayoutEffect，useCallback，useContext}从'React'导入；
从'@material ui/core'导入{createMuiTheme，作为MUIThemeProvider的ThemeProvider}；
const CHANGE_DIR='CHANGE_DIR'；
const ThemeContext=React.createContext（）；
const initthemeopions={direction:'rtl'}；
//eslint禁用下一行反应/道具类型
函数ThemeProvider（{children}）{
const[{direction}，dispatch]=useReducer（（主题，动作）=>{
开关（动作类型）{
个案更改主任：
返回{
主题
方向：action.payload | | theme.direction
}
违约：
回归主题；
}
}，初始化事件）；
const-theme=usemo（（）=>createMuiTheme（{direction}），[direction]）；
useLayoutEffect（（）=>{
document.body.dir=方向；
}，[方向]；
返回(
{儿童}
);
}
导出默认ThemeProvider；
导出常量useChangeDirection=（）=>{
const dispatch=useContext（ThemeSecontext）；
返回useCallback（dir=>dispatch（{type:CHANGE_dir，payload:dir}），[dispatch]）；
};

下面是我每次通过语言按钮切换方向时在开发工具中看到的内容：