打破巨大的全球风格，保留对主题背景的访问

Question

我还没有找到一种干净的方法来将一个巨大的全局样式分解成更小的文件，理想情况下，我可以将这些文件组合成一个单独的全局样式。

当您只是插值时，这很容易做到，但需要/想要的是保留对全局样式的theme上下文的访问权限，以便可以动态应用颜色。

这可能吗？

示例

import css from 'styled-components'
export const thirdp_pace = css`
.pace .pace-progress {
background: ${({ theme }) =>theme.primary};
height: 4px;
}
`

import { createGlobalStyle } from 'styled-components';
export const GlobalStyles = createGlobalStyle` 
:focus {
outline: none !important;
}
${thirdp_pace}
`

这是我很想得到的想法，但它不起作用，因为thirdp_pace无法访问theme。我明白为什么，我只是举个例子。我们的目标是将一种巨大的全球风格分解成更小、更小的风格。

理想情况下，我们会将大量样式信息迁移到它们专用的单个组件中，但不幸的是，这是一项更大的任务。

Answer 1

解决方案：不要使用css-只需返回所需的CSS字符串并调用函数

export function thirdp_pace(theme) {
return `
.pace .pace-progress {
background: ${theme.primary};
height: 4px;
}
`
}

然后

import {thirdp_pace} from './styled-components/thirdparty-overrides/pace'
export const GlobalStyles = createGlobalStyle` 
${
({theme}) => thirdp_pace(theme)
}
`