[React] Style the body element with styled-components and "injectGlobal"

全局样式应用技巧

最新推荐文章于 2025-09-10 20:47:27 发布

转载最新推荐文章于 2025-09-10 20:47:27 发布 · 46 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Answer1215/p/7271811.html

文章标签：

#ui #javascript #ViewUI

本文介绍如何使用styled-components的injectGlobal方法来全局应用样式，避免在项目中导入额外的CSS文件，简化开发流程。

In this lesson, we see how we can apply styles globally with the "injectGlobal" helper method in styled-components. This method allows us to apply styles on the body element, which cannot be wrapped in a styled-component.

You might use the global css like this:

body {
  margin: 0;
  font-family: -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol";
}

So in the app, you need to import css file:

import './App.css'

With style-component, we can use injectGlobal to remove the css file:

import styled, { injectGlobal } from "styled-components";

injectGlobal`
  body {
    margin: 0;
    font-family: -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      Roboto,
      Helvetica,
      Arial,
      sans-serif,
      "Apple Color Emoji",
      "Segoe UI Emoji",
      "Segoe UI Symbol";
  }
`;

转载于:https://www.cnblogs.com/Answer1215/p/7271811.html