问题描述
我正在使用create-react-app,样式化的组件和twin.macro将顺风类应用于我的React元素。效果很好。
我有一小部分无法应用的规则,因为两者之一
- 应将其应用于的元素不在react应用范围(body,#root)
- 样式应全局应用,而不是应用于特定元素。
这就是我想要成为我的全局样式表的地方。
body {
@apply bg-gray-100 select-none;
}
#root {
@apply h-screen text-sm;
}
input:focus,select:focus,textarea:focus,button:focus,div[contenteditable]:focus {
@apply outline-none
}
twin.macro是否提供添加全局样式的功能?如果不是,我最好的选择是什么。
解决方法
使用所选的css-in-js软件包提供的全局样式:
感谢使用twin:)
,twin.macro是否提供添加全局样式的功能? 答案是
twin.macro使用来自styled-component / @ emotion的全局样式(但默认情况下,它使用@emotion)。但请放心,您可以使用样式化组件进行更改
您遵循这些步骤了吗?
https://github.com/ben-rogerson/twin.macro/blob/master/docs/styled-components/create-react-app.md