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

Posted 2023-03-07

【中文标题】使用样式化组件和 twin.macro 设置全局样式的 React 应用程序

【英文标题】：React app with styled components and twin.macro set global styles

【发布时间】：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 是否提供添加全局样式的功能？如果不是什么是我最好的选择。

【参考方案1】：

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

Emotion's global Styled Components createglobalstyle Goobers glob

感谢您使用双胞胎 :)

【讨论】：

感谢创建 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