? ?当我向别人解释某个知识点时，我习惯于不按照官方文件进行如此严格的总结，因为我也是初学者。我知道，对于初学者来说，探索一个新的知识领域探索一个新的知识领域，而是如何简单地理解他们想要学习的知识点。那我就以自己为例，就在我刚H5，Css，Js在海洋中漫游后，趁着兴奋迅速冲向React于是我一头栽进了怀里React官方文档，结果读了三天，连元素渲染都不懂，甚至一度怀疑自己是不是学编程的材料。

? ? 所以我特别清楚，当一个人根本不知道某个知识的时候，你让他读官方文件无异于你告诉他这个池塘里有很多鱼。去拿吧。 你没有给他任何工具。世界上有这么多官方文件的知识。为什么这么多博主需要写更详细的教程？ 我的文章更倾向于使用费曼学习法给那些对知识点一无所知的新手解释，因为他们现在不需要理解太多。他们想知道的是什么，可能是用来做什么的？而不是告诉他们学习后能达到什么水平。 ? ?就像面试题，你在url地址里输入了网址敲下回车发生了什么事情，如果想先有个概念欢迎阅读我的这篇文章 对于一个完全不知道这是什么概念的新人来说，开始解释核心概念是完全错误的。你只需要成为一个向导，用非常生动的语言表达一般的过程，然后深入的事情，随着他们自己学习的深化，他们可以慢慢理解~的细节 这也是我写文章的初衷:

因为下雨了，我想在雨天给后来者撑一把伞。即使伞的力量很小，只能抵挡一点雨，也足够了~

首先要理清楚JSS并不是一个实际的工具，或者依赖包，它更像是一种理念，让前端人员在.js文件中无缝连接的写作css文件。Material UI用这个想法。

这里我们只解释三种写法。HookAPI因为它使用和使用React的hooks组件非常相似，也非常容易理解，我们将有机会再谈。

那怎么用呢？

makerStyles接受一个函数css样式对象，注意，是对象。

所以你可以理解为什么"blue"后面写,而常规写Css样式写；了。 其它的和React里JSX写内敛风格的格式是一样的，不需要写-分隔风格中间的一些名称。例如，以前Css中写的background-color:只需要写backgroundColor即可。

这个和less有别有点小，但总的来说差别很大，需要像下面这样写

伪和伪元素可以元素：

就我个人而言，我认为我可以暂时知道这些写作方法，很少使用更深入的东西。

下面的依赖也是如此MaterialUI包里带的

import clsx from 'clsx'

使用方法是这样使用的：

比如你用了useState给open添加初始值，希望它在某个时刻改变样式，例如<button>组件 如果你想让它点击后的颜色变成红色，你可以使用它。open为true后面的样式类名会自动添加。