在 React 中，我们可以使用多种方式引入 CSS 样式，本文将介绍其中的一种方式。

使用 CSS 文件引入样式

1. 首先，在 React 项目的根目录中创建一个名为 styles.css 的 CSS 文件。

/* styles.css */

body {
  background-color: #f0f0f0;
}

.container {
  width: 500px;
  margin: 0 auto;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

2. 在需要引入样式的组件文件中，使用 import 关键字引入 styles.css 文件。

import React from 'react';
import './styles.css';

function App() {
  return (
    

      
React CSS Styles
      
Welcome to React CSS Styles!
    
  );
}

export default App;

3. 在组件的 JSX 中，使用 className 属性添加样式类名。

function App() {
  return (
    

      
React CSS Styles
      
Welcome to React CSS Styles!
    
  );
}

通过以上步骤，我们成功地在 React 中引入了 CSS 样式。

本文为翻滚的胖子原创文章,转载无需和我联系,但请注明来自猿教程iskeys.com

• 上一篇： 使用React的路由（React Router）
• 下一篇： 使用 React 表单处理用户输入