[data grid] align: 'right' is not applied when using valueGetter

[callbackKid]

Steps to reproduce

Hi, I've got a problem while trying to apply a align: 'right' to my cell

when I use only ValueGetter, nothing changes

{
  field: 'size',
  sortable: true,
  headerName: t('Size (MB)'),
  headerAlign: 'right',
  align: 'right',
  valueGetter: ({ value }: GridValueGetterParams<Backup, Backup['size']>) =>
    formatBytesToMB(notUndefined(value)),
}

but when I use renderCell just to render the value it works:

{
  field: 'size',
  sortable: true,
  headerName: t('Size (MB)'),
  headerAlign: 'right',
  align: 'right',
  valueGetter: ({ value }: GridValueGetterParams<Backup, Backup['size']>) =>
    formatBytesToMB(notUndefined(value)),
  renderCell: ({ value }) => <HighlightedTextSpan text={value} />,
},

so, the question is: is it a bug, or expected behavior?
if yes, why it is so? why style is not applied?

my guess is that it is possible because I use a special component to render string cells, and because I use rendercell in it it overrides the valueGetter

export const useGridStringColDef = (filterMode: GridFeatureMode) => {
  const { gridServerStringOperators, gridClientStringOperators } = useGridStringOperators();

  const getRenderCell = (value: any, row: any) => {
    if (value === null || value === undefined || value === '') {
      return <TypographyBody2>&mdash;</TypographyBody2>;
    }

    if (typeof value !== 'string') {
      throw new Error('The value must be of type "string"');
    }

    return (
      <RowExpander>
        <TypographyBody2 disabled={row.rowDisabled}>
          <HighlightedTextSpan text={value} />
        </TypographyBody2>
      </RowExpander>
    );
  };

  const gridServerStringColDef: GridColTypeDef = {
    type: 'string',
    filterOperators: gridServerStringOperators,
    renderCell: ({ formattedValue, row }) => getRenderCell(formattedValue, row),
  };

  const gridClientStringColDef: GridColTypeDef = {
    type: 'string',
    filterOperators: gridClientStringOperators,
    renderCell: ({ formattedValue, row }) => getRenderCell(formattedValue, row),
  };

  return {
    gridStringColDef: filterMode === 'server' ? gridServerStringColDef : gridClientStringColDef,
  };
};     

Current behavior

Hi, I am trying to apply a align: 'right' to my cell when I use only ValueGetter, nothing changes. But when I use renderCell just to render the value it works. so, the question is: is it a bug, or expected behavior? it yes, why it is so? why style is not applied?

Expected behavior

No response

Context

No response

Your environment

npx @mui/envinfo

  I use the latest version of the chrome 

Search keywords: valueGetter, align, renderCell,

Search keywords:

[michelengelen]

I cannot reproduce this on my local instance with our demo.
Here is an example in codesandbox.

Could you please try to create a minimal reproduction example?