数据结构
网络
关系型数据库管理系统 (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+ 浏览量
广告