演示React中使用普通css样式表的作用域冲突问题
目录
一、样式表是否只在list组件中生效
二、Vue组件中的样式表是否存在冲突问题
三、react中是否类似scoped的指令
一、样式表是否只在list组件中生效
//问题：这个样式表是只在list组件中生效嘛？
//经过实验发现，直接导入css样式表，默认的是在全局上，整个项目都生效的！
二、Vue组件中的样式表是否存在冲突问题
//思考：Vue组件中的样式表，有没有冲突的问题？
//答案：Vue 组建中的样式表，也有冲突的问题；但是，可以使用<style scoped></style>解决冲突问题，因为scoped会给组件中间所有样式加上前缀，前缀给它提供了作用域。
三、react中是否类似scoped的指令
//疑问：react中，有没有类似scoped这样的指令呢？
//答案：没有，因为在react中根本没有指令概念；
import cssobj from “@/css/cmtlist.css” //用import对象来接收，再用from给它一个路径。
只要在任何组件中用到样式表，那么它默认在全局在整个项目的宏观的角度上有一个.title的一个类。
import React from “react”
//导入列表组件需要的样式表
console.log(cssobj); //是一个空对象，因为它没有相对暴露任何成员，存在样式冲突
//导入评论项组件
import CmtItem from “@/ components/CmtItem2” //此文件中写的js代码，要导入，又要接收，在对应文件中要用export用一些成员
export default class CmtList extends React.Component{
constructor(){
super()
this.state = {
Commentlist: [//评论列表数据
{ id: 1,user:”张三”, content:‘哈哈，沙发’}，
{ id: 2, user:”李四”,content:”哈哈，板凳”}，
{ id: 3,user:“王五”, content: “哈哈，凉席”}，
{ id: 4,user:‘'赵六” , content:”哈哈，砖头”}，
{ id: 5,user:”田七”, content: “哈哈，楼下山炮”}
]
}
}
render() {
return <div>
<hl className="title"">这是评论列表组件</h1>
//可以用list测试当前list组件有没有h1标签，Item里有没有h1标签
{this.state.CommentList.map(item => <CmtItem {...item} key={item.id}></CmtItem>)}
</div>
}
}
Cmtlist.css文件：
.title{
Clolor:red;
}
h1{
font-style:italic;
} //因为样式表没有模块的作用域
文字倾斜证明并不是局部生效，是全局生效
CmtItem2.jsx文件：
import React from 'react'
export default function CmtItem(props){
return <div>
<h1 className=”title”>评论人: {props.user}</h1> //字体变为红色，每个组件都是基于首页来进行呈现，这个类也可以访问到，造成冲突。
<p>评论内容:{props.content}</p>
</div>
}
//js样式表有独立作用域
