React-如何将GlobalStyles用于带有Emotion的Google字体

如何解决React-如何将GlobalStyles用于带有Emotion的Google字体

我正在使用Emotion，就像我的css-in-js一样，我承认，我对此很陌生。我花了1+。小时，以弄清楚如何为我的整个应用程序注入全局​​样式并添加google字体。

我尝试过：

• globalStyles和@impot（..）语句。不工作
• 将theme与emotion-theming并设置正文样式-不起作用
• 在我的index.html和他们身上的链接{font-family：Roboto}-不起作用

有人可以给我一个可行的例子吗？我想要。在JS中学习CSS，但这变得很奇怪。这么多时间，就这么简单。

解决方法

我认为您可以采用两种方法：

• 使用从injectGlobal导出的emotion：

import { injectGlobal } from 'emotion'

injectGlobal`
  @font-face {
    font-family: 'Patrick Hand SC';
    font-style: normal;
    font-weight: 400;
    src: local('Patrick Hand SC'),local('PatrickHandSC-Regular'),url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2)
        format('woff2');
    unicode-range: U+0100-024f,U+1-1eff,U+20a0-20ab,U+20ad-20cf,U+2c60-2c7f,U+A720-A7FF;
  }
`

• 使用Global中的@emotion/core：

import { Global,css } from '@emotion/core'

function App() {
  return (
   <div>
    <Global styles={
      css`
        @font-face {
          font-family: 'Patrick Hand SC';
          font-style: normal;
          font-weight: 400;
          src: local('Patrick Hand SC'),url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2)
              format('woff2');
          unicode-range: U+0100-024f,U+A720-A7FF;
        }
       `
      }
    />
    // Others
   </div>
 )
}