React基礎篇（五）css樣式的使用

時間 2020-02-15

標籤 react 基礎 css 樣式使用欄目 React 简体版

原文原文鏈接

本小節主要講述在 React中使用css scss 以及其餘第三方如bootstrap的css樣式配置javascript

1 前言

在 JSX 中，若是須要寫行內樣式，不能爲 style 設置字符串的值，而是應該寫成css

style={{ color:'red',zIndex:3}}
複製代碼

在一個使用案例中上一篇中有寫到，未設置樣式前 html

設置style 樣式後 java

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> ); } } 複製代碼

列表中條目的組件node

//列表中條目的組件

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 渲染使用react

//用來建立組件、虛擬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'));

複製代碼

在上述案例代碼中，經過行內設置樣式，代碼方面有點臃腫，因此在上述的案例中，咱們能夠把行內設置的樣式進一步封裝webpack

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-loaderweb

cnpm i style-loader css-loader -d
複製代碼

而後在 webpack.config.js 中配置 npm

而後建立 css 樣式表

而後在使用的時候引入 css 文件

在上述中經過 import 導入了 css 樣式文件，這個樣式文件中設定的樣式默認是在全局上都有做用，因此這裏能夠定義 css 樣式的做用域，在 webpack.config.js 文件中配置 css-loader 的模塊化json

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/_css-loader@3.4.2@css-loader/dist/cjs.js?modules&localIdentName=[path][name]-[local]-[hash:5]!./src/css/CourseList.css)
Module build failed (from ./node_modules/_css-loader@3.4.2@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/_schema-utils@2.6.4@schema-utils/dist/validate.js:85:11)
    at Object.loader (/Volumes/code/react-study/demo2/node_modules/_css-loader@3.4.2@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 bootstrap@3.3.7 -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')}
  }
};

複製代碼