项目中登录页面的复刻（只是静态复刻）

        从项目中掏出来的MUI组件以及主题theme相关的知识我们了解并且上手写了之后，我们就要回到我们的初衷搞懂这个项目了。还是登录功能，当然我们现在只是了解了MUI组件和theme切换的相关内容。让我们来复刻登录页面的静态样式吧。先上图

        

        ok现在我们拿到了例图，我们发现切换主题也就是更改了相应的颜色（暗夜模式）。当然在写代码之前，我们先梳理一下思路。

                 1.切换主题首先要定义2中主题一种是默认状态一种是黑夜状态

                 所以先使用createTheme配置自定义主题

                Const getTheme=(mode:'dark' | 'light') =>createTheme({ 配置对象里面的内容})

                2.创建组件之后获取当前的主题然后获取自己配置的自定义主题dark以及light两种主题

                3.然后用ThemeProvider theme={theme}组件来将自定义主题合并到页面主题然后页面布局组件比如输入框以及按钮之类的组件可以直接使用主题

        很好思路是有的，现在我们进行代码的编写，按照我们的思路来吧

                   1.自定义创建主题

                // 主题配置函数

        const getTheme = (mode: 'dark' | 'light') => createTheme({

        palette: {

        mode: mode,//核心模式标识

        primary: {

        main: mode === 'dark' ? '#1976d2' : '#2196F3',

        },

        secondary: {

        main: mode === 'dark' ? '#ff4081' : '#f50057',

        },

        background: {

        default: mode === 'dark' ? '#121212' : '#f5f5f5',

        paper: mode === 'dark' ? '#1E1E1E' : '#ffffff',

        },

        text: {

        primary: mode === 'dark' ? '#ffffff' : '#000000',

        secondary: mode === 'dark' ? '#b3b3b3' : '#666666',

        },

        },

        components:{

        MuiButton:{

        styleOverrides:{

        root:{

        transition:'all 0.3s cubic-bezier(0, 0, 1, 1)',

        }

        }

        },

        MuiTextField:{

        styleOverrides:{

        root:{

        '&.MuiOutlinedInput-root':{

        backgroundColor:mode==='dark'?'rgba(255,255,255,0.09)':'#fafafa',

        }

        }

        }

        }

        }

        });

              值得注意的点

        1.组件的主题定义

        components:{

        MuiButton:{

        styleOverrides:{

        root:{

        transition:'all 0.3s cubic-bezier(0, 0, 1, 1)',

        }

        }

        },

          固定格式不同的组件MuiButton这个对应的组件名改掉就好

        2.palette 对象的作用

        核心颜色配置：palette 是 Material-UI 主题中定义全局颜色方案的核心对象。它规定了组件在不同状态（如默认、悬停、激活）和模式（暗黑/明亮）下的颜色表现。

        现在我们定义了主题然后就是定义组件了

        

     

        很好我们不难看出这是一个ChangeLogin的函数组件 然后这里面我没有省略的部分就是我们要面对的问题，我们已经创建了一个主题getTheme那么我们当然需要获取它，这这串代码就起了非常重要的作用，虽然我们可能不知道什么意思，让我们先把代码拿出来‘

       const [darkMode, setDarkMode] = useState(false);

        const theme = getTheme(darkMode ? 'dark' : 'light');

        不懂就问，我们去搜索一下。

               const [darkMode, setDarkMode] = useState<boolean>(false)

        作用: 在 React 组件中声明一个状态变量 darkMode 和更新它的函数 setDarkMode。

        拆解:

useState<boolean>: 使用 TypeScript 的泛型语法，明确指定 darkMode 的类型为布尔值 (true 或 false)。

(false): 初始值为 false，表示默认主题是亮色模式（Light Mode）。

[darkMode, setDarkMode] : 数组解构，darkMode 是当前状态值，setDarkMode 是用于更新状态的函数。

        const theme = getTheme(darkMode ? 'dark' : 'light')

        作用: 根据 darkMode 的值动态生成主题配置。

        拆解:

        darkMode ? 'dark' : 'light': 三元表达式，如果 darkMode 为 true，返回 'dark'，否则返回 'light'。

        getTheme(): 一个自定义函数，接受 'dark' 或 'light' 参数，返回对应的主题配置对象。

         ok我们的思路已经完成了大半只剩下两步

        1.

        用这个提供新样式给我们的MUI组件当然这时候的theme是dark的false ’light‘浅色模式

        这theme我们需要进行动态的切换 我们只了解MUI组件所以就简单的添加一个按钮点击事件吧

        2.

             

          ok很清晰的图片，我们看看我们怎么实现的，点击事件发生后更新darkMode

的值为相反值我们前面定义了为false现在点击就是true 很明确的思路，我们成功的切换主题通过点击按钮。

        然后主题变化也可以了只要把主题引入组件样式里面就可以了，既然我们是静态的所以只需要变换颜色所以我们就举出一个例子就可以了。

        

        很好我们通过主题对象里面的属性以及对应的值来通过变换主题的不同更换颜色，核心是theme主题切换后属性不变变的是属性值也就是颜色设置。值得注意的是我们的颜色只接受rgpd以及#232313这种格式的。

       当然我们没有自定义的主题样式当然有自己的默认值比如

                

        这里面的divider我们并没有定义，这我们想起来当我们自定义主题的时候发生了合并是覆盖相同的样式，而没有定义的依旧按照默认值来处理。

        好了我们的案例到这里就成功的复刻了，通过这个登录页面的复刻让我对熟悉项目有了更多的信心，毕竟静态复刻了那动态效果的复刻就是下一步了。

        大家看到的话可以评论以及给我建议，作为一个新手总是需要大家的指点的。