[DataGrid] refactor: theme to CSS variables #16588
Conversation
Signed-off-by: Rom Grk <[email protected]> Co-authored-by: Kenan Yusuf <[email protected]>
romgrk
added
the
component: data grid
|
Deploy preview: https://deploy-preview-16588--material-ui-x.netlify.app/ Updated pages: |
| const CSSVariablesContext = React.createContext({ | ||
| className: 'unset', | ||
| tag: <style href="/unset" />, | ||
| }); |
There was a problem hiding this comment.
Similar to the mui-next prototype, this PR inserts an inline style tag to inject the classname for CSS variables.
packages/x-data-grid/src/models/configuration/gridConfiguration.ts
Outdated
Show resolved
Hide resolved
| const className = `${CLASSNAME_PREFIX}-${description.id}`; | ||
| const cssString = `.${className}{${variablesToString(description.variables)}}`; | ||
| const tag = <style href={`/${className}`}>{cssString}</style>; | ||
| return { className, tag }; |
There was a problem hiding this comment.
Yes, inline <style> tags are SSR compatible. The description.id is a stable hash so there's also no hydration error.
| const cssString = `.${className}{${variablesToString(description.variables)}}`; | ||
| const tag = <style href={`/${className}`}>{cssString}</style>; |
There was a problem hiding this comment.
So the variables are scoped to a specific instance of the data grid 👍🏻
And then the className is applied to GridRootStyles.
Even though the GridRootStyles div cannot reach the CSS variables values (the style tag is a child of GridRootStyles), we can use CSS variables there because we only apply them to elements down the tree.
Do I get this correctly?
There was a problem hiding this comment.
It doesn't matter where the <style> tag is, it contains something like this:
<style href="/DataGridVariables-123">
.DataGridVariables-123 {
--DataGrid-t-spacing-unit: 4px;
/* ... */
}
</style>The .DataGridVariables-123 classname is available globally even if the style tag is a child of the grid's root container. We need the global classname to target childs in portals, outside of the grid's root container.
Re-revert of #15704