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

Question

我正在使用 create-react-app、样式化组件和 twin.macro 将 tailwind 类应用到我的 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

twin.macro是否提供添加全局样式的功能？答案是

twin.macro 使用来自 styled-component/@emotion 的全局样式（但默认情况下它使用 @emotion）。但别担心，您可以使用 styled-component

更改它

您是否遵循了这些步骤？

https://github.com/ben-rogerson/twin.macro/blob/master/docs/styled-components/create-react-app.md

Answer 2

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

感谢使用 twin :)

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

React app with styled components and twin.macro set global styles

reactjs

styled-components

tailwind-css