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

Tom*_*Tom 1 reactjs styled-components tailwind-css

我正在使用 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
    }
Run Code Online (Sandbox Code Playgroud)

twin.macro 是否提供添加全局样式的功能?如果不是什么是我最好的选择。

小智 5

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

感谢您使用双胞胎:)

  • 感谢您创建双胞胎!对于编写 CSS 来说,这可以节省大量时间。 (4认同)