当前位置: 首页 > Web前端 > HTML

MaterialUI中JSS的写法(随手记)

时间:2023-03-28 13:59:55 HTML

简介:???????????????????????????????????????????????????????????????由于自己本身也是初学者,所以很清楚对于初学者来说,探索一个新的知识领域,需要的不是概念有多高深,而是如何简单理解所要学习的知识点。让我以我自己为例。刚游出H5、Css、Js的汪洋大海,兴奋之余扑向了React的怀抱,于是一头扎进了React的官方文档,整整看了三天。元素渲染不懂,甚至怀疑自己是不是在学编程。所以我很清楚,当一个人对某项知识完全不懂的时候,你让他看官方文档,无异于告诉他这个池子里有很多鱼,你去拿。而且你不给他任何工具。世界上那么多知识都有官方文档,为什么那么多博主还要写更详细的教程呢?我的文章更倾向于用费曼学习法来给那些完全不懂某个知识点的新手讲解,因为这时候他们不需要了解太深的东西,他们想知道的是这个东西是什么,大概是用来做什么的?而不是告诉他们完成学业后可以达到什么水平。就像那个面试题,你在url地址里输入网址,回车,结果呢?如果您想先了解一个概念,请阅读我的文章。你不知道这对一个新人来说是什么概念。从解释核心概念开始是完全错误的。你只需要做一个向导,把大概的过程用非常形象的语言表达清楚就可以了。对于更深入的东西,随着自己学习水平的加深,也会慢慢的能够看懂细节~这就是我写这篇文章的初衷:因为我被雨淋湿了,所以我想打伞对于雨天的迟到者。就算这把伞的力道很小,也只能抵挡一丝雨水,那就够了??~正文:1.JSS是什么,如何使用首先我们要明白,JSS并不是一个实际的工具或者依赖包,它更像是一个概念,让前端人员在.js文件中无缝编写css文件。MaterialUI使用了这个想法。它有三种写法。这里只讲解HookAPI的用法,因为在使用上和React的hooks组件非常相似,非常容易理解。以后有机会再说吧。1、要用就得导入,然后怎么用?很简单makerStyles这个函数接受一个css样式对象,注意是一个对象。那么这样一来,我们就可以理解为什么写在“blue”之后,而写的是常规的css样式;其他的和React中JSX写内联样式的格式一样,不用写-在样式中间分隔一些名称。比如之前用css写的background-color:只需要写backgroundColor即可。2.嵌套格式的写法和less有点不同,但总体来说还不错。如果你需要像下面这样写伪类和伪元素,就去下面:我觉得暂时知道这些写法就够了,更深入的东西日常很少用到。3.条件选择类名下面的依赖也是MaterialUI包中的importclsxfrom'clsx'。使用方法如下:比如你用useState给open添加一个初始值,想让它在某个时刻改变样式,比如你想让