最全的react视频【黑马程序员】--第八章 CSS样式的使用

一、行内样式

{/* 注意： 在JSX中，如果写行内样式了，不能为style 设置 字符串的值 */}

{/* 而是应该这么写： style= {{color: 'red'}} */}

{/* 在行内样式中，如果 是 数据类型的样式，则可以不用引号包裹，如果是 字符串类型的样式值，必须使用 引号包裹 */}

 <h1 style={{color: 'red', fontSize: '35px', zIndex: 3, textAlign:'center'}}>这是评论列表</h1>

样式代码优化

CmtList.jsx

import React from 'react'
//import ReactDOM from 'react-dom'
//使用class关键字定义父组件
//导入 评论项 字组件
import CmtItem from './CmtItem'

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>
            {/* 注意： 在JSX中，如果写行内样式了，不能为style 设置 字符串的值 */}
            {/* 而是应该这么写： style= {{color: 'red'}} */}
            {/* 在行内样式中，如果 是 数据类型的样式，则可以不用引号包裹，如果是 字符串类型的样式值，必须使用 引号包裹 */}
            <h1 style={{color: 'red', fontSize: '35px', zIndex: 3, textAlign:'center'}}>这是评论列表</h1>

            {this.state.CommentList.map(item =><CmtItem {...item} key={item.id}></CmtItem> )}
        </div>
    }
}

CmtItem.jsx

import React from 'react'
import ReactDOM from 'react-dom'

//第一层封装  将样式对象和UI结构分离
// const itemStyle = {border: '1px dashed #ccc', margin: '10x', padding: '10px', boxShow: '0 0 10px #ccc'}
// const userStyle = {fontSize: '14px'}
// const contentStyle = {fontSize: '12px'}

//第二层封装 合并为一个大的样式对象
// const styles ={
//     item : {border: '1px dashed #ccc', margin: '25x', padding: '15px', boxShow: '0 0 10px #ccc'},
//     user :{fontSize: '14px'},
//     content : {fontSize: '12px'}
// }

//第三层封装  抽离为单独的样式表模块

import styles from '@/components/styles'

//使用function定义自组件,因为其中的每一项都是通过item拿到的
export default function CmtItem(props){
    return <div style={styles.item}>
    <h1 style={styles.user}>评论人 ： {props.user}</h1>
    <p style={styles.content}>评论内容： {props.content}</p>
</div>
}

第三种方法时，在组件文件夹下，建   styles.js  文件：

export default  {
        item : {border: '1px dashed #ccc', margin: '25x', padding: '15px', boxShow: '0 0 10px #ccc'},
        user :{fontSize: '14px'},
        content : {fontSize: '12px'}
    }

二、使用样式表美化组件 CSS

1.安装CSS样式表loader

cnpm i style-loader css-loader -D

2.配置第三方loader

    module: {
        rules: [
            {
                test: /\.js|jsx$/,
                use: 'babel-loader',
                exclude: /node_modules/ 
            },
            {
                test:/\.css$/,
                use: ['style-loader','css-loader']
            },//打包处理css样式表的第三方loader
        ]
    },

3.创建.css样式表

/* cmtlist.css */
.title{
    color: red
}

4.导入样式表

//导入样式表
import cssObj from '@/css/commentList.css'
console.log(cssObj)//{} 这是一个空对象，因为.css中未导出 export default
<h1 className="title">这是评论列表组件</h1>

直接导入的样式表，没有作用域，属于全局样式 子组件中未导入该样式表，但是也会作用与子组件 这样会造成样式冲突

CSS模块化，解决样式冲突问题

• Vue中可以通过添加指令<style scoped></style>确定作用域

• React中没指令概念，可以为css样式表通过？追加参数，其中有一个固定参数，叫做modules, 表示为普通的的CSS样式表，启用模块化。 格式：

• 此时cssObj对象不为空 ，但是CSS模块化只针对 类选择器 和 Id选择器 ，不会对标签选择器生效，所以它还是全局的

• 此时渲染出来的类名或者ID名是编码；可以自定义

5. 启用css-modules

  （1）修改 webpack.config.js 这个配置文件，为 css-loader 添加参数：

{
   test:/\.css$/,
   use: ['style-loader','css-loader?modules']
},//打包处理css样式表的第三方loader

 （2） 在需要的组件中，import 导入样式表，并接受模块化CSS样式对象：

import cssobj from '@/css/cmtitem.css'

 （3）在需要的HTML标签中，使用className指定模块化样式：

 <h1 className={cssobj.title}>评论人 ： {props.user}</h1>

例如，iterm项中添加样式：

CmtItem.jsx

import React from 'react'
//import ReactDOM from 'react-dom'
import cssobj from '@/css/cmtitem.css'
import styles from '@/components/styles'

//使用function定义自组件,因为其中的每一项都是通过item拿到的
export default function CmtItem(props){
    return <div className={cssobj.cmtbox}>
    <h1 className={cssobj.title}>评论人 ： {props.user}</h1>
    <p className={cssobj.content}>评论内容： {props.content}</p>
</div>
}

cmtiterm.css

.title{
    font-size:14px;
}

.content{
    font-size:12px;
}

.cmtbox{
    border: 1px dashed #ccc;
    margin:10px;
    padding:10px;
    box-shadow: 0 0 10px #ccc;
}

6. 自定义类名生成参数
使用localIdentName自定义生成的类名格式，可选参数有：

• [path]：表示样式表相 对于项目根目录所在 路径
• [name]：表示 样式表 文件名称
• [local] ：表示样式的类名定义名称
• [hash:length]：表示默认32为的hash值，取5-6位即可，防止类名重复

配置 webpack.config.js 文件

{
    test: /\.css$/,
    use: ['style-loader','css-loader?modules&localIdentName=[paht]][name]-[local]-[hash]']
}

 

:global(.test){}：使类名不被模块化 
:local(.test){}：使类名模块化，默认是这样的