Material UI中JSS的写法(随手笔记)

引言:

   我习惯在给别人讲解某一个知识点的时候不会按照官方文档上那么严谨的去总结，因为我也是初学者过来的，我深知对于入门新手来说探索一个新的知识领域他们需要的不是多么深奥的概念，而是怎么去简单理解要学的知识点。那我自己为例子，在我刚从H5，Css，Js的海洋中遨游出来以后，趁着兴奋劲赶快冲向React的怀抱，于是我一头栽进去React的官方文档，结果读了三天，连元素渲染这个地方都没读懂，甚至一度怀疑自己是否是学编程的料。

    所以我特别清楚在一个人完全不了解某一个知识的时候，你让他去读官方文档无异于你告诉他，这个池塘里有许多鱼，你去拿吧。 而你却不给他任何工具。世界上那么多知识都有官方文档，为什么还需要那么多博主来写更详细的教程呢？

我的文章更偏向于使用费曼学习法来给那些对于某个知识点完全不了解的新手讲解，因为他们这个时候并不需要理解太深的东西，他们更想知道的是这个东西是什么，大概是用来干什么的？而不是对他们说，学完以后可以达到什么水平。

   就好像那道面试题，你在url地址里输入了网址敲下回车发生了什么事情，如果想先有个概念欢迎阅读我的这篇文章
你对一个新人完全不知道这是什么概念的人就开始讲解核心概念是完全错误的。你只需要当一个引路人，用很形象的言语表达清楚大概流程即可，再深入的东西，随着他们自己学习程度的加深，这其中的细节他们慢慢就能理解～

这也是我写文章的初衷:

因为淋过雨，所以下雨天更想为后来者撑一把伞，哪怕这把伞的力量很小，只能抵挡一丝丝雨水，那也足够了☔️～

---

正文：

一.JSS是什么，怎么使用

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

它有三种写法，这里我们只讲解HookAPI的用法，因为它使用起来和React的hooks组件非常类似，也非常好理解，后续有机会我们再来说。

1.要想用，就得引入

然后怎么使用呢？非常简单

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

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

2.嵌套格式的书写

这个和less有点小区别，不过总体来说是大差不差的，需要像下面这样写

伪类和伪元素就向下面即可:

个人认为暂时知道这几个写法即可，更深入的东西日常使用的很少。

3.条件选择类名

下面这个依赖也是MaterialUI包里带的

import clsx from 'clsx'

使用方法是这样使用的：

比如你使用了useState给open添加了初始值，想让它在某个时刻改变样式，比如组件 你想让它在点击过后的颜色变为红色，那么你就可以使用这个，当open为true时，会自动添加后面的样式类名。