2. 程式人生 > 其它 >React框架module中antd元件的改寫

React框架module中antd元件的改寫

阿新 • • 發佈：2021-06-28

PART1: 技術概述

1. 什麼情況下會使用到這個技術？

使用antd等元件時，經常需要更改元件的預設樣式，需要用:global{}將需要修改的樣式包裹起來。

2. 學習該技術的原因

需要對antd的元件進行改寫，美化引用的元件以滿足專案需求。

3. 技術的難點在哪裡？

找不到相應的類名，經常改寫後無法顯示

PART2: 技術詳述

1. 流程圖

2. 程式碼演示

PART3: 技術使用中遇到的問題和解決過程

倒是沒什麼大問題，就是在樣式修改的時候發現偽元素::after有點麻煩，如果不是通過檢查網頁元素來確定它的名字，根本找不出來發生了什麼，而且它的樣式當時只能通過!important

暴力修改，目前也沒發現什麼好辦法（如圖所示）。

PART4: 總結

React框架使用下來，還是喜歡函式式元件，可以利用antd的layout佈局進行封裝，針不戳。antd元件確實好用，目前使用下來沒有什麼困難。

PART5: 參考材料

css(react)中 global
Web 開發技術 -> CSS（層疊樣式表） -> ::after (:after)

相關推薦

React框架module中antd元件的改寫

PART1: 技術概述 1. 什麼情況下會使用到這個技術？ 使用antd等元件時，經常需要更改元件的預設樣式，需要用:global{}將需要修改的樣式包裹起來。

臨時存放：react框架-自寫table元件-歷次迭代

版本一： <!DOCTYPE html> <html> <head> <meta charset=\"UTF-8\" /> <title>勾選和分頁元件之React16.4.0版</title>

React Native中ScrollView元件輪播圖與ListView渲染列表元件用法例項分析

本文例項講述了React Native中ScrollView元件輪播圖與ListView渲染列表元件用法。分享給大家供大家參考，具體如下：

react中 受控元件和 非受控元件 淺析

一 受控元件 顧名思義，受控 也就是能夠被控制，簡而言之也就是 該元件ui的顯示或者內部state邏輯的變化依賴外部的 props的傳入。

2020.11.11 橫向滑動條：深入學習flex antd元件庫中upload功能學習和嘗試 fetch初次使用

11.11 小紅點業務優化，回顧橫向滑動條是如何實現的。 今天要做新的功能，做一個上傳簡歷的功能。下午2點做完

React中函式元件與類元件有什麼區別

技術標籤：react 與React類元件相比，React函式式元件究竟有何不同呢？之前聽到最典型的回答就是：類元件提供了更多特性（如：State）。當然隨著 hooks 出現，事實早非如此

引入antd元件樣式_create-react-app 實現 antd 的按需載入

技術標籤：引入antd元件樣式 按需載入 antd 的實現方式： 用 create-react-app 建立專案後，如果需要第三方的外掛庫，需要配置 webpack 配置檔案，步驟如下：

React Hooks-----------Form中有自定義元件後getFieldsValue onFinish獲取資料undefined

技術標籤：react hookreact 已知 對於自定義或第三方的表單控制元件，也可以與 Form 元件一起使用。只要該元件遵循以下的約定：

react中導致元件渲染

技術標籤：reactjs 1.箭頭函式（行內函數） function addItem(){ log(111) } <Input onClick={()=>addItem}/>

React專案中antd的按需引入與自定義主題

一.React中使用antd 1.下載antd包 npm i antd -S 2.按需引入 //App.jsx檔案import {Button} from \'antd\' //引入按鈕元件

詳解React中共享元件邏輯的三種方式

廢話少說，這三種方式分別是：render props、高階元件和自定義Hook。下面依次演示

React中antd-modal巢狀form表單的使用

<Modal title=\"請選擇模板\" visible={true} width=\"428px\" centered={true} className=\'creatModal\'

React中受控元件

import React, { Component } from \'react\' export default class Input extends Component { constructor(props){

react 【context在函式元件和class元件中的使用】

前言 　　在一個典型的 React 應用中，資料是通過 props 屬性自上而下（由父及子）進行傳遞的，但這種做法對於某些型別的屬性而言是極其繁瑣的（例如：地區偏好，UI 主題），這些屬性是應用程式中許多元件都需要的。

基於React框架進行編寫第一個應用元件（函式和類）

1.React設計的核心思想 一切皆是元件，最小可以化到一個元素 --在react開發中，所有都是基於元件開發和封裝（因為react沒有html、所有的東西都是js物件；在底層原理是v層“框架”--僅僅用於檢視的庫框架裡的虛擬dom

react中父元件state改變，子元件重新整理

1.在react專案開發中，難免會遇到在父元件中state之改變，子元件也會有資料改變，

react框架class元件的demo案列

學習react專案聯絡了已歌header的元件的封裝 import { NavBar } from \'antd-mobile\'; import { LeftOutline } from \'antd-mobile-icons\';

vuejs中父子元件之間通訊方法例項詳解

本文例項講述了vuejs中父子元件之間通訊方法。分享給大家供大家參考，具體如下：

laravel框架學習筆記之元件化開發實現方法

本文例項講述了laravel框架學習筆記之元件化開發實現方法。分享給大家供大家參考，具體如下：

Django中modelform元件例項用法總結

modelform是model衍生出來的form . modelform的用法非常死. 首先在models.py裡建立模型表.