当前位置：首页 > news >正文

react-13react中外部css引入以及style内联样式（动态className与动态style）

news 来源：原创 2025/5/7 5:55:51

1. 外部css文件 - 普通引入

1.1 创建一个 CSS 文件，MyComponent.css。

/* MyComponent.css */
.my-class {color: red;font-size: 20px;
}

1.2 组件中import引入

import React from 'react';
import './MyComponent.css'; // 引入 CSS 文件function MyComponent() {return (<div className="my-class">This is a div with a class name.</div>);
}export default MyComponent;

1.3 动态className

import React, { useState } from 'react';function MyComponent() {const [isActive, setIsActive] = useState(false);return (<div className={isActive ? 'active' : 'inactive'}onClick={() => setIsActive(!isActive)}>Click me to toggle class.</div>);
}export default MyComponent;

2. 外部css文件 - CSS Modules引入

CSS Modules 是一种用于在 JavaScript 生态系统中使用 CSS 的方法，它通过模块化的方式避免 CSS 类名冲突。

2.1 创建一个 CSS Module 文件，MyComponent.module.css。

/* MyComponent.module.css */
.myClass {color: red;font-size: 20px;
}

2.2 在组件中引入并使用 CSS Module

import React from 'react';
import styles from './MyComponent.module.css'; // 引入 CSS Module 文件function MyComponent() {return (<div className={styles.myClass}>This is a div with a CSS Module class name.</div>);
}export default MyComponent;

react-10样式模块化（./index.module.css，＜div className={welcome.title}＞Welcome＜/div＞）-CSDN博客文章浏览阅读470次。React样式模块化（./index.module.css， Welcome）https://blog.csdn.net/2301_76671906/article/details/147627482?fromshare=blogdetail&sharetype=blogdetail&sharerId=147627482&sharerefer=PC&sharesource=2301_76671906&sharefrom=from_link

3. style内联样式引入

3.1 style内联样式

import React from 'react';function MyComponent() {return (<div style={{ color: 'blue', fontSize: '20px' }}>This is a div with inline style.</div>);
}export default MyComponent;

3.2 动态style

鼠标移入移出背景颜色的变化

 state = {isHover: false}// 鼠标移入移出判断handleMouse = (isEnter) => {return () => {this.setState({ isHover: isEnter })}}render() {return (<div>{/* 判断鼠标移入移出 */}<li style={{ backgroundColor: this.state.isHover? '#f5f5f5' : '#fff' }}     onMouseEnter={this.handleMouse(true)} onMouseLeave={this.handleMouse(false)} ></div>)}