如何解决在带有 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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。