react基础之样式处理的几种方法

在 React 中，处理样式有多种方法，以下是几种常见的样式处理方式：

1. 内联样式

可以直接在组件中使用内联样式，适合简单样式的快速应用：

const style = { color: 'blue', fontSize: '20px' };

const MyComponent = () => (
  <div style={style}>Hello, World!</div>
);

const MyComponent = () => (
  <div style={{color: 'blue'}}>Hello, World!</div>
);

2. CSS 文件

传统的 CSS 文件方法，通过类名来应用样式，便于管理和重用：

/* styles.css */
.myClass {
  color: red;
  font-size: 18px;
}

import './styles.css';

const MyComponent = () => (
  <div className="myClass">Hello, World!</div>
);

3. CSS Modules

使用 CSS Modules 可以避免类名冲突，样式是局部的：

/* styles.module.css */
.myClass {
  color: green;
}

import styles from './styles.module.css';

const MyComponent = () => (
  <div className={styles.myClass}>Hello, World!</div>
);

4. Styled Components

使用 Styled Components 可以通过 JavaScript 定义组件样式，支持动态样式：

import styled from 'styled-components';

const StyledDiv = styled.div`
  color: purple;
  font-size: 22px;
`;

const MyComponent = () => (
  <StyledDiv>Hello, World!</StyledDiv>
);

您好，我是肥晨。 欢迎关注我获取前端学习资源，日常分享技术变革，生存法则；行业内幕，洞察先机。