Skip to content

Improve CSS architecture #99

Description

@oliviertassinari

3 improvements opportunities:

  1. 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.
  2. 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.
  3. 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).

Metadata

Metadata

Assignees

No one assigned

    Labels

    scope: data gridChanges related to the data grid.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions