在带有 React CSS 语法的样式化组件中使用 CSS 导入答案

【问题标题】：Using CSS Imports in Styled Components with React CSS Syntax在带有 React CSS 语法的样式化组件中使用 CSS 导入
【发布时间】：2021-05-31 19:04:53
【问题描述】：

问题基本上是我需要知道如何在 React CSS 中使用 @import 来与样式化组件一起使用。我尝试了一些但不起作用，无法像下面这样导入字体。

const Wrapper = styled.div({
    '@import': 'url(`https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap`)',
    fontFamily: 'Roboto, sans-serif',
    fontSize: '0.8em',
    margin: '20px',
    width: '400px'
})

我希望这可行，但我认为有一个我不知道的语法问题。

而且，我必须说我不使用下面的语法。

const Wrapper = styled.div`
    @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap');
    font-family: 'Roboto', sans-serif;
    font-size: 0.8em;
    margin: 20px;
    width: 400px;
`

我知道，这段代码有效。但这不是我需要的，所以请不要推荐包含模板文字和本地字体导入的解决方案。

【问题讨论】：

标签： css reactjs jss google-fonts

【解决方案1】：

我总是在单独的 CSS 文件中导入这样的字体：

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap');
    
.wrapper {
  font-family: 'Roboto', sans-serif;
  font-size: 0.8em;
  margin: 20px;
  width: 400px;
}

如果您想在样式化组件中使用它，请阅读以下内容：

https://dev.to/alaskaa/how-to-import-a-web-font-into-your-react-app-with-styled-components-4-1dni

【讨论】：

谢谢，但正如我指定的那样，我不使用本地导入，它解释了带有样式组件的本地导入。