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

Question

I am using components from a library developed with styled components. I have a component that uses ag-grid , which is not styled., I am trying to customize the header of the grid by providing my own implementation and using some components from the aforementioned library . Since ag-grid is not a styled component, it and its children - such as this header component - are not aware of any theme context. I still need however to pass the theme to the header component I am developing AND have it passed to whatever components it uses from the library. I would rather do that without using a second ThemeProvider in the app. I tried withTheme, but i think all it does is pass a theme prop to the component it wraps, but nothing gets passed to the component's children

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

and 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);

so obviously UnthemedDataGridColumnHeader and UnstyledButton get the theme pro, but the components used to build the UnstyledButton don't.. anyone knows how this can be achieved?

kfc kfc · Accepted Answer · 2019-09-02T07:06:10

ag-grid now supports container context. you need to pass it reactNext={true} in the props

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

1 Answers