[data grid] Export GridEditInputCellRoot related stuff

[sneko]

Summary

Hi,

I'm using renderCellEdit with an enhanced InputBase. Unfortunately by default it will have fontSize: '1rem', padding: 0 whereas your default GridEditInputCellRoot has fontSize: '0.875rem', padding: '0 16px'.

I know it's always possible to override CSS but it's a bit hacky. I would have expected the properties base you use to be exported so people do not have to hardcode them to mimic the global style on editable cells we don't want to custom

https://github.com/mui/mui-x/blob/4497258e9f9867b4ee29346bca16e83a6322b9c5/packages/x-data-grid/src/components/cell/GridEditInputCell.tsx#L28C7-L39
(same for useUtilityClasses)

Note: I guess this pattern could be applied not only for basic input cells.

Examples

No response

Motivation

No response

Search keywords: renderEditCell style fontSize

[michelengelen]

mmh, do you have a suggestion how this could be improved?

I guess one approach would be to export the root component and use it with the as prop where you can pass in your custom InputBase.

Another option would be to introduce something similar to what you briefly mentioned there: useRootComponent or something of that sort.

On the other hand we are currently working on a design agnostic version of the data grid which will probably use composition API for customization.

Thoughts @mui/xgrid ?

[KenanYusuf]

@mui/x I wonder if it would make more sense for us to apply the style overrides in GridRootStyles.ts, like:

[`& .${c['cell--editable']} .${inputBaseClasses.root}`]: {
  ...t.typography.body2,
  padding: '1px 0',
  '& input': {
    padding: '0 16px',
    height: '100%',
  },
},

That way styles get applied to <InputBase /> components used in custom editable cells.

Edit: Although, on second thought, custom styles may be a reason people reach for renderCellEdit in the first place. The style overrides should probably be opt-in.