当前位置：首页 > React

react组件内如何引入全局样式

2026-01-25 17:08:03React

引入全局样式的几种方法

在React项目中引入全局样式有多种方式，以下列举常见且实用的方法：

方法1：通过index.js或App.js直接导入CSS文件

在项目入口文件（如src/index.js或src/App.js）中直接导入CSS文件，样式将全局生效：

import './styles/global.css'; // 路径根据实际项目调整

方法2：使用CSS Modules的全局作用域

通过:global选择器包裹样式，适用于需保留模块化但部分样式需全局生效的场景：

/* global.module.css */
:global(.global-class) {
  color: red;
}

组件中引入：

react组件内如何引入全局样式

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

方法3：通过styled-components的全局样式

使用styled-components的createGlobalStyle创建全局样式组件：

import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  body {
    margin: 0;
    font-family: sans-serif;
  }
`;

function App() {
  return (
    <>
      <GlobalStyle />
      {/* 其他组件 */}
    </>
  );
}

方法4：使用Sass/Less预处理器

react组件内如何引入全局样式

通过Sass/Less的全局变量或混合宏，配合Webpack配置全局导入：

// _variables.scss
$primary-color: #3498db;

在webpack.config.js中配置：

{
  loader: 'sass-loader',
  options: {
    additionalData: `@import "src/styles/variables";`
  }
}

方法5：通过@emotion的全局样式

使用@emotion/react的Global组件：

import { Global, css } from '@emotion/react';

const globalStyles = css`
  body {
    background-color: #f5f5f5;
  }
`;

function App() {
  return (
    <>
      <Global styles={globalStyles} />
      {/* 其他组件 */}
    </>
  );
}