Material UI supports using array values for `sx` props.

[LvChengbin]

material-react-table version

v1.7.4

react & react-dom versions

18.2.0

Describe the bug and the steps to reproduce it

Material ui supports providing an array value for sx props, and material-react-table doesn't consider about this as the code below:

sx={(theme) => ({
        transition: 'all 150ms ease-in-out',
        ...(tablePaperProps?.sx instanceof Function
          ? tablePaperProps?.sx(theme)
          : (tablePaperProps?.sx as any)),
      })}

This makes users must merge multiple sx props manually before passing to material-react-table and I am not sure if it'll always be consistent with Material-UI internal implementation.

You may be able to implement this feature by using an array value with some code like:

sx={[
    { transition: 'all 150ms ease-in-out' },
    tablePaperProps?.sx ?? {}
]}

This can also make a sx property with a function value support all arguments that Material-UI provides to it.

Material UI doc: https://mui.com/system/getting-started/the-sx-prop/#array-values

Minimal, Reproducible Example - (Optional, but Recommended)

<Table
    muiTablePaperProps={{
        sx : [ { mt : 4 } ] // doesn't work.
    }}
/>

Screenshots or Videos (Optional)

No response

Do you intend to try to help solve this bug with your own PR?

Maybe, I'll investigate and start debugging

Terms

• [X] I understand that if my bug cannot be reliably reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

[KevinVandy]

I've been wanting to make this refactor for a bit to support this, but just have not quite gotten to it yet. It will come eventually, or others can help with PRs. Doesn't have to all be converted at once

[KevinVandy]

closing this, as the entire CSS internals of MRT will be rewritten in Pigment CSS before this is ever supported.