mui 随笔

这个UI框架香是香，但是多少带点臭。

使用Typography来动态改变文字大小

typography 就是 mui提供的让文字显示更美观，更有一致性的 组件，他本身暴露的API可以实现响应式。

   <Typography
      // className="bg-lime-700"

      fontSize={"5rem"}
      sx={{
        fontSize: {
          lg: "5rem",
          md: "3rem",
          sm: "2rem",
          xs: "1rem",
        },
      }}
    >
      高效ToDo
    </Typography>

CssBaseline

CssBaseline 是一个组件，包含他以后，就可以进行 css normalize化 ，也就是让其他组件在不同浏览器中表现尽量一致。比较多的做法是在顶层使用一次。

极限简单的darkmode

首先使用 React.createContext 来提供 切换模式的实际工具 （是一个函数）的数据源。

其次使用mui提供的ThemeProvider来在 次上层便捷地提供 prop,这里的prop名称就是theme，传入的theme对象是由mui提供的工具函数createTheme生成，他包含了mui系统中关于theme的完整内容。

在某个切换控件中，首先使用mui提供的 useTheme来获取ThemeProvider传入的theme,其次使用React.useContext()来获取 切换模式的实际工具，随后只要根据需要进行使用即可