开发者学堂课程【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()包裹起来的类名,这样的标签选择器,不会被模块化控制。