样式化组件，从多个文件中创建全局样式答案

【问题标题】：Styled Components, createGlobalStyle from multiple files样式化组件，从多个文件中创建全局样式
【发布时间】：2026-01-03 23:45:01
【问题描述】：

我正在使用样式化组件和 createGlobalStyles 来创建全局样式。

我希望 createGlobalStyles 中的样式来自不同样式的组件文件，然后有一个文件来创建 createGlobalStyle。我遇到了一些问题，包括将单独的样式组件放入一个文件以创建 creatGlobalStyle。

这是一个简化的例子

//fonts.ts
export const Fonts = `
    h1, h2, h3, h4, h5{
        color: #aaa;
    }
`

//fontFamily.ts
export const FontFamily = `
    h1, h2, h3, h4, h5{
        font-family: Arial;
    }
`

//globalStyle.ts
import {createGlobalStyle} from 'styled-components';

import {Fonts} from './fonts'

import {Fonts} from './fontFamily'

export default createGlobalStyle`
   Fonts
   Fonts
`

如何在 createGlobalStyle 中包含单独文件中的样式

【问题讨论】：

标签： styled-components

【解决方案1】：

你可以这样做：

import { createGlobalStyle } from "styled-components";

import { Fonts } from "./fonts";
import { FontFamily } from "./fontFamily";

const GlobalStyle = createGlobalStyle`
  ${Fonts}
  ${FontFamily}
`;

【讨论】：

【解决方案2】：

如果您像我们一样有很多全局样式，您可以使用 styled-components css 方法来利用 styled-components (css) IDE 语法高亮和 linting，您还可以执行以下操作：

import React from 'react'
import { createGlobalStyle, css } from 'styled-components'

const Reset = css`
  * {
    box-sizing: border-box;
  }
`

const Accessibility = css`
  .hidden {
    display: none !important;
    visibility: hidden;
  }
`

const BaseStyles = createGlobalStyle`
  ${Reset};
  ${Accessibility};
`

export const GlobalStyles = () => (
  <>
    <BaseStyles />
  </>
)

导入 GlobalStyles 并渲染为 {children} 的兄弟

【讨论】：