react 使用全局 css 类 - CSS (1)

📌 相关文章

📜 react 使用全局 css 类 - CSS (1)

📅 最后修改于: 2023-12-03 15:34:39.462000 🧑 作者: Mango

React 使用全局 CSS 类 - CSS 主题

简介

在 React 中，如果您想使用全局的 CSS 类来样式化组件，有几种方法可供选择。这篇文章将介绍一些最常用的方法。

直接在 HTML 中引入全局样式

最简单的方法是直接在 HTML 文件中引入全局样式表。这可以通过在 public/index.html 文件中添加以下代码实现:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="path/to/your/css/file.css" />
    <title>React App</title>
  </head>
  <body>
    <!-- ... -->
  </body>
</html>

这将在所有组件中使得全局样式表生效。

在组件中引入全局样式

另一种方法是在组件文件中直接引入全局样式表，并将其应用于特定组件。通过这种方式，您可以避免全局样式影响到所有组件。您可以像下面这样使用 CSS Modules:

/* global.css */
.container {
  max-width: 960px;
  margin: 0 auto;
}

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

function MyComponent() {
  return (
    <div className={styles.container}>
      {/* ... */}
    </div>
  );
}

export default MyComponent;

使用 CSS-in-JS 库

最后，您可以使用 CSS-in-JS 库，如 styled-components、emotion 或 JSS，在组件中编写并应用全局样式。

这些库提供各种方法来定义组件样式，例如将全局样式封装到一个单独的组件中，或使用默认主题来设置全局样式。

以下是使用 styled-components 库的示例:

import React from 'react';
import styled, { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  body {
    background-color: #f5f5f5;
  }
`;

const Container = styled.div`
  max-width: 960px;
  margin: 0 auto;
`;

function MyComponent() {
  return (
    <>
      <GlobalStyle />
      <Container>
        {/* ... */}
      </Container>
    </>
  );
}

export default MyComponent;

结论

以上是在 React 中使用全局 CSS 类的三种方法。选择哪种方法取决于您的项目需求和个人偏好。希望这篇文章对您有所帮助！