开发者学堂课程【React 入门与实战：演示 React 中使用普通 css 样式表的作用域冲突问题】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/585/detail/8111
演示 React 中使用普通 css 样式表的作用域冲突问题
目录
一、样式表是否只在 list 组件中生效
二、Vue 组件中的样式表是否存在冲突问题
三、react 中是否类似 scoped 的指令
一、样式表是否只在 list 组件中生效
//问题：这个样式表是只在 list 组件中生效嘛？
//经过实验发现，直接导入 css 样式表，默认的是在全局上，整个项目都生效的！
二、Vue 组件中的样式表是否存在冲突问题
//思考：Vue 组件中的样式表，有没有冲突的问题？
//答案：Vue 组建中的样式表，也有冲突的问题；但是，可以使用解决冲突问题，因为 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
这是评论列表组件
//可以用 list 测试当前 list 组件有没有h1标签，Item 里有没有 h1标签
{this.state.CommentList.map(item => )}
}
}
Cmtlist.css文件：
.title{
Clolor:red;
}
h1{
font-style:italic;
}
//因为样式表没有模块的作用域
文字倾斜证明并不是局部生效，是全局生效
CmtItem2.jsx文件：
import React from 'react'
export default function CmtItem(props){
return
评论人: {props.user}
//字体变为红色，每个组件都是基于首页来进行呈现，这个类也可以访问到，造成冲突。
评论内容:{props.content}
}
//js 样式表有独立作用域
