06《黑马程序员——react》CSS样式的使用

一、行内样式

添加行内样式style = {{ color: 'red' }}，样式以对象类型
在行内样式中：数值可以不用引号包裹；字符串必须用引号
fontSize = font-size

<h1 style={{color:'red', fontSize:'40px', zIndex: 3}}>这是评论列表组件</h1>

注意：在JSX中设置行内样式，style的值不可为字符串

<h1 style="color:red">这是评论列表组件</h1>
//Uncaught Error: The `style` prop expects a mapping from style properties to values, 
//not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX.

样式代码优化

第一种封装：抽离style

import React from 'react'

const itemSytle ={border: '1px dashed #ccc', margin:'10px', padding:'10px', 
                    boxShadow: '0 0 10px #ccc' }
const userStyle = {fontSize:'20px'}
const contentStyle = {fontSize:'18px'}

//评论项子组件
export default function CommentItem(props){
    return <div style={itemSytle}>
        <h1 style={userStyle}>评论人： {props.user}</h1>
        <p style={contentStyle}>评论内容： {props.content}</p>
    </div>
}

第二种封装：合并对象

//第二种封装,合并对象
const style = {
    item: {border: '1px dashed #ccc', margin:'10px', padding:'10px', boxShadow: '0 0 10px #ccc' },
    user: {fontSize:'20px'},
    content: {fontSize:'18px'}

}

//评论项子组件
export default function CommentItem(props){
    return <div style={style.item}>
        <h1 style={style.user}>评论人： {props.user}</h1>
        <p style={style.content}>评论内容： {props.content}</p>
    </div>
}

第三种封装：将样式抽离为单独的js模块文件

//style.js文件
export default{
    item: {border: '1px dashed #ccc', margin:'10px', padding:'10px', boxShadow: '0 0 10px #ccc' },
    user: {fontSize:'20px'},
    content: {fontSize:'18px'}
}

//jsx文件
import React from 'react'
import style from '@/components/style'

export default function CommentItem(props){
    return <div style={style.item}>
        <h1 style={style.user}>评论人： {props.user}</h1>
        <p style={style.content}>评论内容： {props.content}</p>
    </div>
}

源代码

二、引用.CSS样式表

1.安装CSS样式表loader

cnpm i style-loader css-loader -D

2.配置第三方loader

module: {
        rules: [
            //打包处理CSS样式表，的第三方loader；
            //从后往前调用，先css-loader后style-loader
            {
                test: /\.css$/,
                use: ['style-loader','css-loader']
            }
        ]
    }

3.创建.css样式表

//commentList.css
.title {
    color: red;
}

h1 {
    font-style: italic;
}

4.导入样式表

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

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

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

Vue中可以通过添加指令<style scoped></style>确定作用域
React中没指令概念，可以为css样式表启用模块化 'css-loader?modules'

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

import cssObj from '@/css/commentList.css'

console.log(cssObj) //{title: "_3_9TJr6iW_u4RkoRhLDQG2", cmtTitle: "_3O2eaUcYZSR_WM8qiMhu69"}

<h1 id={cssObj.cmtTitle} className={cssObj.title}>这是评论列表组件</h1>
//翻译为HTML<h1 id="_3O2eaUcYZSR_WM8qiMhu69" class="_3_9TJr6iW_u4RkoRhLDQG2">这是评论列表组件</h1>

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

源代码

自定义类名生成参数

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

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

配置 web.config.js 文件

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

渲染到页面的样式

<style type="text/css">
.-paht--commentList-title-824a9f6f5463544d78bf2e195b7b27ff {
    color: red;
}

h1 {
    font-style: italic;
}

#-paht--commentList-cmtTitle-89e145b0a421b0fed776cf33b8e208f2 {
    text-align: center;
}</style>

渲染HTML

<h1 id="-paht--commentList-cmtTitle-89e145b0a421b0fed776cf33b8e208f2" 
    class="-paht--commentList-title-824a9f6f5463544d78bf2e195b7b27ff">这是评论列表组件
</h1>

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