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

【问题标题】：React app with styled components and twin.macro set global styles使用样式化组件和 twin.macro 设置全局样式的 React 应用程序
【发布时间】：2021-02-22 09:24:14
【问题描述】：

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

【问题讨论】：

标签： reactjs styled-components tailwind-css

【解决方案1】：

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

感谢您使用双胞胎 :)

【讨论】：

感谢创建 Twin！在编写 CSS 时，它可以节省大量时间。

【解决方案2】：

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

【讨论】：