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

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

引言:


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

image.png

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

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

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

这也是我写文章的初衷:

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


正文:


一.JSS是什么,怎么使用


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

image.png

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

1.要想用,就得引入


image.png

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

image.png

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

image.png

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

2.嵌套格式的书写


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

image.png

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

image.png

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

3.条件选择类名


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

import clsx from 'clsx'

使用方法是这样使用的:

image.png

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


相关文章
|
C# 开发者 Windows
基于Material Design风格开源、易用、强大的WPF UI控件库
基于Material Design风格开源、易用、强大的WPF UI控件库
652 0
|
11月前
|
API C# 开发者
基于Material Design风格开源、免费的WinForms UI控件库
基于Material Design风格开源、免费的WinForms UI控件库!
276 0
|
XML Android开发 UED
💥Android UI设计新风尚!掌握Material Design精髓,让你的界面颜值爆表!🎨
随着移动应用市场的蓬勃发展,用户对界面设计的要求日益提高。为此,掌握由Google推出的Material Design设计语言成为提升应用颜值和用户体验的关键。本文将带你深入了解Material Design的核心原则,如真实感、统一性和创新性,并通过丰富的组件库及示例代码,助你轻松打造美观且一致的应用界面。无论是色彩搭配还是动画效果,Material Design都能为你的Android应用增添无限魅力。
312 1
|
XML Android开发 UED
💥Android UI设计新风尚!掌握Material Design精髓,让你的界面颜值爆表!🎨
【7月更文挑战第28天】随着移动应用市场的发展,用户对界面设计的要求不断提高。Material Design是由Google推出的设计语言,强调真实感、统一性和创新性,通过模拟纸张和墨水的物理属性创造沉浸式体验。它注重色彩、排版、图标和布局的一致性,确保跨设备的统一视觉风格。Android Studio提供了丰富的Material Design组件库,如按钮、卡片等,易于使用且美观。
546 1
|
IDE 程序员 开发工具
IDEA插件-Material Theme UI/IDEA最强主题插件/IDEA图标美化
"Material Theme UI" 是一个用于 JetBrains IDE(如 IntelliJ IDEA、WebStorm、Android Studio 等)的插件,它将原始外观改为 Material Design 风格,并提供丰富的选项来根据个人喜好配置 IDE。
4561 0
IDEA插件-Material Theme UI/IDEA最强主题插件/IDEA图标美化
|
前端开发 开发者 开发框架
JSF与Bootstrap,打造梦幻响应式网页!让你的应用跨设备,让用户爱不释手!
【8月更文挑战第31天】在现代Web应用开发中,响应式设计至关重要,以确保不同设备上的良好用户体验。本文探讨了JSF(JavaServer Faces)与Bootstrap框架的结合使用,展示了如何构建响应式网页。JSF是一个基于Java的Web应用框架,提供丰富的UI组件和表单处理功能;而Bootstrap则是一个基于HTML、CSS和JavaScript的前端框架,专注于实现响应式设计。通过结合两者的优势,开发者能够更便捷地创建自适应布局,提升Web应用体验。然而,这种组合也有其局限性,如JSF组件库较小和较高的学习成本等,因此在选择开发框架时需综合考虑具体需求和应用场景。
149 0
|
前端开发 开发者 C#
深度解析 Uno Platform 中的 MVVM 模式:从理论到实践的全方位指南,助你轻松掌握通过 C# 与 XAML 构建高效可维护的跨平台应用秘籍
【8月更文挑战第31天】本文详细介绍如何在优秀的跨平台 UI 框架 Uno Platform 中实施 MVVM(Model-View-ViewModel)模式,通过一个简单的待办事项列表应用演示其实现过程。MVVM 模式有助于分离视图层与业务逻辑层,提升代码组织性、易测性和可维护性。Uno Platform 的数据绑定机制使视图与模型间的同步变得高效简便。文章通过构造 `TodoListViewModel` 类及其相关视图,展示了如何解耦视图与模型,实现动态数据绑定及命令处理,从而提高代码质量和开发效率。通过这一模式,开发者能更轻松地构建复杂的跨平台应用。
200 0
|
前端开发 JavaScript 开发者
Angular Material 超厉害!与传统自定义 UI 大对比,构建美观一致 UI 的绝佳选择!
【8月更文挑战第31天】在前端开发中,构建美观一致的用户界面至关重要。Angular Material 是一个基于 Material Design 规范的强大 UI 组件库,提供丰富的预定义组件和设计指南。本文通过对比 Angular Material 和传统自定义 UI,展示了前者在设计理念、组件丰富度、响应式设计及主题定制方面的显著优势。
406 0
|
设计模式 前端开发 开发者
Angular携手Material Design:探索设计模式下的UI组件开发之道——从按钮到对话框的全面实战演示
【8月更文挑战第31天】在现代Web应用开发中,Angular框架结合Material Design设计原则与组件库,显著提升了用户界面的质量与开发效率。本文通过具体代码示例,详细介绍如何在Angular项目中引入并使用Material Design的UI组件,包括按钮、表单和对话框等,帮助开发者快速构建美观且功能强大的应用。通过这种方式,不仅能提高开发效率,还能确保界面设计的一致性和高质量,为用户提供卓越的体验。
145 0
IDEA 插件 Material Theme UI收费后 免费的办法
IDEA 插件 Material Theme UI收费后 免费的办法
1429 2

热门文章

最新文章