React基础篇（五）css样式的使用

其他 2020-02-19 10:13:47 阅读次数: 0

本小节主要讲述在 React中使用css scss 以及其他第三方如bootstrap的css样式配置

1 前言

在 JSX 中，如果需要写行内样式，不能为 style 设置字符串的值，而是应该写成

style={{ color:'red',zIndex:3}}

在一个使用案例中上一篇中有写到，未设置样式前
在这里插入图片描述

设置style 样式后
在这里插入图片描述

import React from 'react';
import CourseItem from '@/components/CourseItem';


//父组件
export default class CourseList extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      courseList: [
        {id: 1, userNmae: '张三', courseName: '语文'},
        {id: 2, userNmae: '张三2', courseName: '语文2'},
        {id: 3, userNmae: '张三3', courseName: '语文3'}
      ]
    };
  }

  render() {
    return (
        <div>
          {/*在JSX中行内样式需要如下这样写*/}
          {/*需要注意的是，如果是纯数字类型的可以不写引号，如果是字符串类型的必须使用字符串包裹*/}
          <h1 style={{color: 'red', fontSize: '22px', zIndex: 3, fontWeight: 200, textAlign: 'center'}}>课程统计列表</h1>
          {/*这里通过map 来构建*/}
          {this.state.courseList.map(item => <CourseItem {...item}/>)}
        </div>
    );
  }
}

列表中条目的组件

//列表中条目的组件

import React from 'react';


export default class CourseItem extends React.Component {
  render() {
    return (
        <div style={{border: '1px dashed #ccc', margin: '10px', padding: '10px', boxShadow: '0 0 5px'}}
             key={this.props.id}>
          <h2 style={{fontSize: '14px'}}>姓名：{this.props.userNmae}</h2>
          <p style={{fontSize: '12px'}}>课程内容： {this.props.courseName}</p>
        </div>
    );
  }
}

ReactDOM.render 渲染使用



//用来创建组件、虚拟DOM元素 生命周期
import React from 'react';
//所创建好的组件和虚拟DOM放到页面上展示
import ReactDOM from 'react-dom';

import CourseList from '@/components/CourseList'




//第三步 使用ReactDOM 把虚拟DOM 渲染到页面上
// 参数一 要渲染的虚拟DOM元素
// 参数二 指定页面上的容器
ReactDOM.render(<CourseList/>, document.getElementById('app'));

在上述案例代码中，通过行内设置样式，代码方面有点臃肿，所以在上述的案例中，我们可以把行内设置的样式进一步封装

2 对style样式的封装

2.1 第一层封装
//列表中条目的组件

import React from 'react';

//第一层封装
const itemStyle = {border: '1px dashed #ccc', margin: '10px', padding: '10px', boxShadow: '0 0 5px'};
const itemUserStyle = {fontSize: '14px'};
const itemCourseStyle = {fontSize: '12px'};


export default class CourseItem extends React.Component {


  render() {
    return (
        <div style={itemStyle} key={this.props.id}>
          <h2 style={itemUserStyle}>姓名：{this.props.userNmae}</h2>
          <p style={itemCourseStyle}>课程内容： {this.props.courseName}</p>
        </div>
    );
  }
}
2.2 第二层封装

import React from 'react';
//第二层封装
const courseItemStyle={
  item:{border: '1px dashed #ccc', margin: '10px', padding: '10px', boxShadow: '0 0 5px'},
  itemUser:{fontSize:"14px"},
  itemCourse:{fontSize:"12px"}
}


export default class CourseItem extends React.Component {


  render() {
    return (
        <div style={courseItemStyle.item} key={this.props.id}>
          <h2 style={courseItemStyle.itemUser}>姓名：{this.props.userNmae}</h2>
          <p style={courseItemStyle.itemCourse}>课程内容： {this.props.courseName}</p>
        </div>
    );
  }
}
2.3 第三层封装 封装成单独的js文件

在这里插入图片描述
然后在使用的时候引入文件


//用来创建组件、虚拟DOM元素 生命周期
import React from 'react';
//所创建好的组件和虚拟DOM放到页面上展示
import ReactDOM from 'react-dom';

import CourseList from '@/components/CourseList'


//第三步 使用ReactDOM 把虚拟DOM 渲染到页面上
// 参数一 要渲染的虚拟DOM元素
// 参数二 指定页面上的容器
ReactDOM.render(<CourseList/>, document.getElementById('app'));

3 使用css样式文件

安装style-loader

 cnpm i style-loader css-loader -d

然后在 webpack.config.js 中配置
在这里插入图片描述
然后创建 css 样式表
在这里插入图片描述
然后在使用的时候引入 css 文件
在这里插入图片描述

在上述中通过 import 导入了 css 样式文件，这个样式文件中设定的样式默认是在全局上都有作用，所以这里可以定义 css 样式的作用域，在 webpack.config.js 文件中配置 css-loader 的模块化



const path = require('path');
//导入插件
const  HtmlWebPackPlugin = require('html-webpack-plugin');
//创建插件
const  htmlPlugin = new HtmlWebPackPlugin({
  template:path.join(__dirname,'./src/index.html'),//源文件
  filename: 'index.html' //生成内存中首页面的名称
});


//Node.js 两种导出模块的方式：module.exports和exports
//module和exports是Node.js给每个js文件内置的两个对象
//webpack 默认只能打包处理 .js 后缀名类型的文件
module.exports = {
  mode: 'development',// production development
  //引用插件
  plugins: [
      htmlPlugin
  ],
  //所有的第三方模块的配置规则
  module: {
    //匹配规则
    rules: [
      {test:/\.js|jsx$/,use:'babel-loader',exclude:/node_modules/},
      //  modules 为精通的css样式文件启动模块化
      {test:/\.css$/,use:['style-loader','css-loader?modules']}
    ]
  },
  resolve: {
    //这里配置这几个文件的后缀名可以省略不写
    extensions: ['.js','.jsx','.json','.css'],
    //配制别名@ 表示项目根目录中 src的这一层路径
    alias:{'@':path.join(__dirname,'./src')}
  }
};

启用 css-loader 的模块化功能后，在使用css样式时
在这里插入图片描述
在这里需要注意的是，css 模块化，只针对 类选择器与 ID 选择器，不会将标签选择器模块化
在这里插入图片描述
在上述效果图中，我们可以看到实际中的class名称是自动行形成的，在这里，我们可以 通过 css-loader 添加参数 localIdentName 来自定义生成的类名格式

  • [ path ] 表示样式表相对于根目录所在的路径
  • [ name ] 表示样式表文件名称
  • [ local ] 表示样式的类名定义名称
  • [ hash:length ] 表示32位的 hash 值
    例如我们配置如下的规则
  //所有的第三方模块的配置规则
  module: {
    //匹配规则
    rules: [
      {test:/\.js|jsx$/,use:'babel-loader',exclude:/node_modules/},
      //  modules 为精通的css样式文件启动模块化
      //  这里通过 localIdentName 来配置生成的类名
      {test:/\.css$/,use:['style-loader','css-loader?modules&localIdentName=[path][name]-[local]-[hash:5]']}
    ]
  },

上述这样配置是 css-loader 老版本的写法，如果css-loader用的新版本，那么会有异常

ERROR in ./src/css/CourseList.css (./node_modules/[email protected]@css-loader/dist/cjs.js?modules&localIdentName=[path][name]-[local]-[hash:5]!./src/css/CourseList.css)
Module build failed (from ./node_modules/[email protected]@css-loader/dist/cjs.js):
ValidationError: Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'localIdentName'. These properties are valid:
   object { url?, import?, modules?, sourceMap?, importLoaders?, localsConvention?, onlyLocals?, esModule? }
    at validate (/Volumes/code/react-study/demo2/node_modules/[email protected]@schema-utils/dist/validate.js:85:11)
    at Object.loader (/Volumes/code/react-study/demo2/node_modules/[email protected]@css-loader/dist/index.js:34:28)
 @ ./src/css/CourseList.css 2:26-168 22:4-35:5 25:25-167
 @ ./src/components/CourseList.jsx
 @ ./src/index.js

那么在高版本的 css-loader 中 ，webpack.config.js 中可以这样配置

  //所有的第三方模块的配置规则
  module: {
    //匹配规则
    rules: [
      {test: /\.js|jsx$/, use: 'babel-loader', exclude: /node_modules/},
      //  modules 为精通的css样式文件启动模块化
      //  这里通过 localIdentName 来配置生成的类名
      {
        test: /\.css$/, use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules:{
                getLocalIdent: (context, localIdentName, localName, options) => {
                  return localName;
                },
              }
            }
          }
        ]
      }
    ]
  },

然后在浏览器中
在这里插入图片描述
在实际开发中，对与 css 文件中启动了模块化，那么当使用 :global 关键字包裹的 类选择器不会被配置模块化

.title {
  color: red;
  text-align: center;
  font-size: 16px;
}

/*这里是全局的*/
:global(.test) {
  color: green;
  font-size: 18px;
}

4 使用其他三方样式库

例如使用 bootstrap

cnpm i [email protected] -S
cnpm i sass-loader node-sass -D
cnpm i url-loader -D
cnpm i file-loader -D

处理css中的图片资源时，我们常用的两种loader是file-loader或者url-loader，两者的主要差异在于。url-loader可以设置图片大小限制，当图片超过限制时，其表现行为等同于file-loader，而当图片不超过限制时，则会将图片以base64的形式打包进css文件，以减少请求次数。
sass-loader 用来加载 SASS / SCSS 文件并将其编译为 CSS，
sass-loader 依赖于node-sass

项目中自己创建的样式表定义为 .scss 文件，第三方的样式表还是以 .css 结尾，那么在当前项目中只为自己项目中创建的 .scss 文件启动模块化

然后在 webpack.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' //生成内存中首页面的名称
});


//Node.js 两种导出模块的方式：module.exports和exports
//module和exports是Node.js给每个js文件内置的两个对象
//webpack 默认只能打包处理 .js 后缀名类型的文件
module.exports = {
  mode: 'development',// production development
  //引用插件
  plugins: [
    htmlPlugin
  ],
  //所有的第三方模块的配置规则
  module: {
    //匹配规则
    rules: [
      {test: /\.js|jsx$/, use: 'babel-loader', exclude: /node_modules/},
      //  modules 为精通的css样式文件启动模块化
      //  这里通过 localIdentName 来配置生成的类名
      //  一般第三方的样式表都是 .css 结尾的，然后自己项目中创建的样式表可以使用 .scss 或者 less 结尾
      {
        test: /\.scss$/, use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules:{
                getLocalIdent: (context, localIdentName, localName, options) => {
                  return localName;
                },
              }
            }
          },
            'sass-loader'
        ]
      },
      //  这里配置 css 的规则
      {test:/\.css$/, use: ['style-loader','css-loader']},
      //  这里配置 字体等规则
      {test:/\.ttf|woff|woff2|eot|svg$/,use:'url-loader'},
    ]
  },
  resolve: {
    //这里配置这几个文件的后缀名可以省略不写
    extensions: ['.js', '.jsx', '.json', '.css','.scss'],
    //配制别名@ 表示项目根目录中 src的这一层路径
    alias: {'@': path.join(__dirname, './src')}
  }
};

然后在项目中 使用 bootstrap
在这里插入图片描述
然后效果预览
在这里插入图片描述

完结

早起的年轻人 博客专家
发布了354 篇原创文章 · 获赞 180 · 访问量 45万+
他的留言板 关注

猜你喜欢

转载自blog.csdn.net/zl18603543572/article/details/104280628
今日推荐
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
周排行
返回指定时间格式
fopen函数中的mode参数
Java 单例模式探讨
Flex remoteobject工作原理探讨
寻找mplayer的便捷安装方法
30天了解30种技术系列---(26)MySQL自动化运维工具Inception
关于Jboss/Tomcat/Jetty的JNDI定义123
程序减肥，strip，eu-strip 及其符号表
AsyncTask、View.post(Runnable)、ViewTreeObserver三种方式总结frame animation自动启动
Json和Bean的互相转换
每日归档
更多
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022