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

问题描述

问题基本上是我需要知道如何在 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 文件中导入这样的字体：

@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