如何在不使用 ThemeProvider 的情况下将主题传递给深层嵌套样式的组件？ withTheme 不会削减它

Question

我使用的组件来自使用样式化组件开发的库。我有一个使用 ag-grid 的组件，它没有样式化。我试图通过提供我自己的实现并使用上述库中的一些组件来自定义网格的 header 。由于 ag-grid 不是样式化组件，它和它的 children - 例如这个 header 组件 - 不知道任何主题上下文。但是，我仍然需要将主题传递给我正在开发的 header 组件，并将其传递给它从库中使用的任何组件。我宁愿在不在应用程序中使用第二个 ThemeProvider 的情况下这样做。我尝试了 withTheme，但我认为它所做的只是将主题道具传递给它包装的组件，但没有传递给组件的 children

export const App = () => 
<ThemeProvider theme={lwTheme}>
<>
<GlobalStyles />
<AppContainer />
<>
</ThemeProvider>)

和 DataGridColumnHeader

const UnthemedDataGridColumnHeader: FunctionComponent<DataGridColumnHeaderProps> = ({
    column,
    displayName,
    enableSorting = true,
    progressSort,
    renderContent = defaultContentRenderer,
    clickAnywhereToSort = true,
    theme = lwTheme,
    className,
}) => {
....
return (
        <div ref={reactContainer}>
            <UnstyledButton
                theme={theme}
                onClick={toggleSortType}
                onTouchEnd={toggleSortType}
                className={`ag-cell-label-container${(sortState !== SortType.none && " ag-header-cell-sorted-" + sortState) || ""}${(className &&
                    " " + className) ||
                    ""}`}
            >
                {renderContent && renderContent(displayName, sortState)}
                <span className={`ag-icon ag-icon-${sortState}`} unselectable="on"></span>
            </UnstyledButton>
        </div>
    );

}
export const DataGridColumnHeader = withTheme(UnthemedDataGridColumnHeader);

很明显 UnthemedDataGridColumnHeader 和 UnstyledButton 获得了主题专业版，但是用于构建 UnstyledButton 的组件没有.. 有人知道如何实现吗？

Answer 1

ag-grid 现在支持容器上下文。你需要在 props

中传递它 reactNext={true}

如何在不使用 ThemeProvider 的情况下将主题传递给深层嵌套样式的组件？ withTheme 不会削减它

how to pass theme to deep nested styled components without using ThemeProvider? withTheme doesn't cut it

reactjs

styled-components