反应导入引导 CSS 文件 - CSS

在 React 中，我们可以使用 import 语句来引入 CSS 文件并将其应用于组件。

步骤

1. 首先，在项目的根目录下创建一个新的 CSS 文件，例如 styles.css。
2. 在 CSS 文件中编写样式代码。
3. 在需要使用 CSS 样式的组件中，使用 import 语句导入 CSS 文件。例如，在 App.js 文件中导入 styles.css 文件。

import './styles.css';

4. 将样式应用于组件。可以使用以下两种方式：
   • 在组件的 JSX 代码中直接应用样式。例如：

   <div className="container">
      <h1 className="title">Hello, World!</h1>
   </div>
   

   • 在组件的 className prop 中传递样式类名。例如：

   <div className="container">
      <h1 className="title">Hello, World!</h1>
      <p className="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
   </div>
   

   在这种情况下，container、title 和 text 都是 styles.css 文件中定义的样式类名。

示例

styles.css

.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f2f2f2;
}

.title {
  font-size: 48px;
  font-weight: bold;
  color: #333;
}

.text {
  font-size: 24px;
  line-height: 1.5;
  color: #666;
}

App.js

import './styles.css';

function App() {
  return (
    <div className="container">
      <h1 className="title">Hello, World!</h1>
      <p className="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  );
}

export default App;

结论

在 React 中，可以使用 import 语句来引入 CSS 文件并将其应用于组件。可以直接在 JSX 代码中应用样式，也可以在 className prop 中传递样式类名。