使用样式化组件和twin.macro设置全局样式的React应用

编程问答 2022-06-03

问题描述

我正在使用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

reactjsreactjsstyled-componentstailwind-css