当前位置: 首页 > 工具软件 > CSSobj > 使用案例 >

使用css样式表美化组件

谭煜
2023-12-01
  1. 安装loader
    cnpm i style-loader css-loader -D
  2. 创建css文件
    css->cmtitem.css
.title{
    font-size: 14px;
  }
  
  .content{
    font-size: 12px;
  }
  
  #cmtbox{
    border: 1px dashed #ccc;
    margin: 10px;
    padding: 10px;
    box-shadow: 0 0 10px #ccc;
  }

css->cmtlist.css

/* 注意: 被 :local() 包裹起来的类名,会被模块化,默认情况下,所有的类名和ID 都被 模块化了 */
.title{
    color: red;
    text-align: center;
    font-weight: 200;
}

/* 注意:被 :global() 包裹起来的类名,不会被模块化,而会是全局生效 */
:global(.test){
    font-style: italic;
}

为普通样式表通过modules参数启用模块化
web pack.config.js

const path = require('path')
const HtmlWebPackPlugin = require('html-webpack-plugin')

const htmlPlugin = new HtmlWebPackPlugin({
    template:path.join(__dirname,'./src/index.html'),
    filename:'index.html'
})

module.exports = {
    mode : 'development',
    plugins:[
        htmlPlugin
    ],
    module:{
        rules:[
            { test: /\.js|jsx$/, use: 'babel-loader', exclude: /node_modules/ },
            // 大家可以在 css-loader 之后,通过 ? 追加参数,
            // 其中,有个固定的参数,叫做 modules , 表示为 普通的 CSS 样式表,启用模块化
            { test: /\.css$/, use: ['style-loader', 'css-loader?modules']} // 打包处理 CSS 样式表的第三方loader
        ]
    },

    resolve :{
        extensions :[ '.js' , '.jsx' , '.json' ], //表示这几种文件的后缀名可以省略,按照从前到后的方式来进行补全
        alias: {//表示别名
            '@' : path.join(__dirname,'./src') //这样,@ 就表示 项目根目录中src 的这一层路径
        }
    }
        
}

components->CmtItem.jsx

import React from 'react'

import cssobj from '@/css/cmtitem.css'
console.log(cssobj);

export default function CmtItem (props){
    return <div id={cssobj.cmtbox}>
    <h1 className={cssobj.title}>评论人:{props.user}</h1>
    <p className={cssobj.comment}>评论内容:{props.content}</p>
    </div>
}

components->cmtList.jsx

import React from 'react'
import CmtItem from "@/components/CmtItem"

//导入 列表组件需要的样式表
//问题 : 这个样式表,是 只在 List组件中生效吗?
//经过实验,发现,直接导入 css 样式表,默认是全局上,整个项目都生效的

//思考:Vue 组件中的样式表,有没有 冲突的问题??
// 答案 : Vue  组件只能够的样式表,也有冲突的问题;但是,可以使用<style scoped></style>
//疑问:React 中,有没有类似于 scoped 这样的指令呢?
// 答案 :没有,因为 在 React 中,根本就没有指令的概念;
import cssobj from '@/css/cmtlist.css'
console.log(cssobj);

//如果在引用某个包的时候,这个包被安装到了 node_modules 目录中,
//则,可以省略 node_modules 这一层目录,直接已包名开始引入自己的模块 或 样式表
//自己规定 : 第三方的 样式表,都以 .css 结尾,这样,我们不要为普通的 .css 启用模块化
//  自己的样式表,都要以 .scss 或者 .less 结尾,只为 .scss 或者 .less文件启用模块化
//import 'bootstrap/dist/css/bootstrap.css'

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>
        <h1 className={cssobj.title}>这是评论列表组件</h1>
        
        {this.state.CommentList.map(item => <CmtItem {...item} key = {item.id}></CmtItem>)}
  
      </div>
  
    }
}
 类似资料: