带有样式组件和 twin.macro 设置全局样式的 React 应用程序

Question

我正在使用 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 是否提供添加全局样式的功能？如果不是什么是我最好的选择。

Answer 1

使用您选择的 css-in-js 包提供的全局样式：

• 情感的 global
• 样式组件 createglobalstyle
• 古伯斯 glob

感谢您使用双胞胎:)