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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了[React] Style the body element with styled-components and "injectGlobal"相关的知识,希望对你有一定的参考价值。

?????????inject   pre   component   color   style   import   lob   ica   global   

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";
  }
`;

 

以上是关于[React] Style the body element with styled-components and "injectGlobal"的主要内容,如果未能解决你的问题,请参考以下文章

JS 将字符串复制到剪贴板

给网页增加水印的方法,react

表单验证

if 语句不作为对象返回 React JS

CSS 类选择器样式未在 React 项目中应用

浏览器的 Event Loop