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

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

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

css 复制代码

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

1.2 组件中import引入

javascript 复制代码

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

javascript 复制代码

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。

css 复制代码

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

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

javascript 复制代码

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内联样式

javascript 复制代码

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

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

javascript 复制代码

 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>
    )}