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()来获取 切换模式的实际工具,随后只要根据需要进行使用即可