通过 local 和 global 设置类名是否被模块化|学习笔记

简介: 快速学习通过 local 和 global 设置类名是否被模块化

开发者学堂课程【React 入门与实战通过 local 和 global 设置类名是否被模块化】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址https://developer.aliyun.com/learning/course/585/detail/8114


通过 local 和 global 设置类名是否被模块化


目录

一、使用:local():global()

二、注意:


一、使用: local(): global()

以下所阐述都拿此代码举例说明:

.title{

color: red;

text-align: center;

font-weight: 200;}

}

/* css模块化,只针对类选择器和Id选择器生效*/

/* css模块化不会将标签选择器模块化*/

/* h1{

font-style: italic;

}*/

1:local()包裹的类名

是被模块化的类名,只能通过 class Name={css0bj.类名]来使用同时,: local 默认可以不写,这样,默认在样式表中定义的类名,都是被模块化的类名。

具体说明:

title 是已经被默认模块化了,真正的类名就不会叫 title 了,会叫 title 锁定的字符串,才是真正的类名。

2:global()包裹的类名

是全局生效的,不会被 C33-mouule 控制,定义的类名是什么,就是使用定义的类名 class Name=“类名“。

具体阐述:

.test{

font-style: italic;}

这样的代码还是会被模块化,要不想被模块化可以如下写代码:

:global(.test){

font-style: italic;

如此便不会有 title 类。

要想有 title 类;

因为两个字符串是不能直接写在一起的,所以有以下两种代码的写法。

第一种代码:

render(){

return <div>

<h1 class Name={cssobj. title + ' test'}>这是评论列表组件</h1>

第二种代码:

render() {

return <div>

{/* <h1 class Name={cssobj. title + ' test'}>这是评论列表组件</h1>*/}

<h1 class Name={[cssobj. title, 'test'].join(’')}>这是评论列表组件</1>

注意:被: global()包裹的类名,不会被模块化,而是全局生效的。

 

二、注意:

只有.title 这样的类样式选择器,才会被模块化控制,被:local()包裹的类名,默认情况下,所有的类名和 id 都会被模块化;类似于:global()包裹起来的类名,这样的标签选择器,不会被模块化控制。

相关文章
|
7月前
es6 proxy的作用和用法
es6 proxy的作用和用法
37 5
|
8月前
|
Shell Android开发 开发者
Android系统 自定义动态修改init.custom.rc
Android系统 自定义动态修改init.custom.rc
429 0
|
PHP
PHP - Laravel 视图模板(blade.php) 模板继承(@extends、@yield、@section)
PHP - Laravel 视图模板(blade.php) 模板继承(@extends、@yield、@section)
383 0
|
PHP
tp5源码解析--自动加载类
在TP5的框架使用过程中,自动加载类是可能会接触到,上手不难,但若想随心所欲的用,还是需要了解一番。用了千次,却没看过一次源码,学习源码,起码对TP5这个框架使用更加得心应手,毕竟技术服务于业务,能够写出更简介、更方便、更有效的业务代码,本身就是一件身心愉悦的事儿;
138 0
|
SQL IDE PHP
php对象字段声明,easyswoole ORM 快速生成注释
在PHPSTORM IDE中,我们可以通过注释给类写明可调用字段名,这样子才有语法提示。 比如在Thinkphp中,虽然允许我们可以通过对象属性方式去调用,但是并没有语法提示。 添加注释后 就舒服很多了。
141 0
php对象字段声明,easyswoole ORM 快速生成注释
|
前端开发
前端项目实战192-修改ant design默认样式需要进行:global设定
前端项目实战192-修改ant design默认样式需要进行:global设定
149 0
|
存储 索引 Perl
Perl项目中的面向对象、继承默认加载和正则表达式的使用方法
Perl项目中的面向对象、继承默认加载和正则表达式的使用方法
112 0
|
存储 JavaScript 前端开发
企业级项目开发中的交互式解释器以及global全局定义、Stream流的合理运用和实战【Note.js】
企业级项目开发中的交互式解释器以及global全局定义、Stream流的合理运用和实战【Note.js】
|
C++ 容器
set以及使用举例--C++基础
set以及使用举例--C++基础
155 0
set以及使用举例--C++基础
|
前端开发
通过local和global设置类名是否被模块化
通过local和global设置类名是否被模块化