3 improvements opportunities:
- Make specificity as low as possible. I have discovered this looking at the component, there are cases where we will need to allow the developer to customize the rendering of the component, we should identify these cases and make sure the CSS specificity is as low as possible. There are specificity over 5 (barely overridable) in:
https://github.com/mui-org/material-ui-x/blob/3a68cef50b0906674f3e43b37bd888c2e7b4c86c/packages/grid/x-grid-modules/src/components/styled-wrappers/grid-root.tsx#L11
The higher the specificity is the harder the overrides are.
- Differentiate class names that are public and private. It's unclear, looking with the Chrome dev tool, which classes are private, and which ones are public to be customized.
For the name of the class names, let's use the same convention as the main repository.
- Reduce bloat. I think that we should drop styled-components for the first MVP to simplify the usage of the grid (one less dependency to install & to configure for SSR & injection order), leverage the values from the theme (easier overrides), reduce the bundle size (-12 kB gzipped).
3 improvements opportunities:
https://github.com/mui-org/material-ui-x/blob/3a68cef50b0906674f3e43b37bd888c2e7b4c86c/packages/grid/x-grid-modules/src/components/styled-wrappers/grid-root.tsx#L11
The higher the specificity is the harder the overrides are.
For the name of the class names, let's use the same convention as the main repository.