資料結構
網路
關係型資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
時裝理論
法律ReactJS 中的 CSS 載入器
在本文中，我們將學習如何為我們的 React 應用程式提供動態類名。
步驟
Npm run eject
此命令將允許我們在執行 create-react-app 命令時自定義預定義的配置和選項。這是一個單方面的操作，日後無法撤消。
更改 webpack 配置
我們需要配置 webpack 載入器，以啟用 css-loader，它將為我們的類提供動態命名。
將配置設定為 -
{
test: /\.css$/,
loader: 'style-loader'
}, {
test: /\.css$/,
loader: 'css-loader',
query: {
modules: true,
localIdentName: '[name]_[local]__[hash:base64:5]'
}
}動態匯入 CSS 檔案
import styles from './App.css'
示例
在此示例中，我們將構建一個 React 應用程式，該應用程式對 JSX 元素的類進行動態命名。
App.jsx
import React from 'react';
import styles from './App.css'
const App = () => {
return (
<div classname={styles.App}>
<h2>TutorialsPoint</h2>
</div>
);
};
export default App;在上述示例中，將動態類名為提供給 <div> 標籤。
輸出
更新於：2021-03-18
2K+ 瀏覽量
廣告