Table breaks when using strict CSP-headers

[mjulstein]

material-react-table version

3.0.1

react & react-dom versions

18

Describe the bug and the steps to reproduce it

Matrial UI officially has a guide to how to implement CSP:
https://mui.com/material-ui/guides/content-security-policy/#how-does-one-implement-csp

This works for the most part, but in some places that are hardly noticeable it breaks.
For the most part the inline styles are done via <style> elements that nonce can be applied to.
However sometimes the styles are applied via attributes, and those are not compatible with CSP v3 nonce.

Initial rendered example with CSP nonce:

Disabling inline styles manually give same result:

Enabling inline styles manually give the expected result:

From what I can see is that making fallback versions of the generated css in a style tag could be a work around. ie:

<style nonce={my-nonce}> { fallback css here } </style>

However I do see that mui manages to insert the the emotion styles some places in the table, but not where the table root gets it's inline styles.

This should be done in a similar way for the css variables, so that we can pass nonce to the table as a prop, and no have to hack it in.

Minimal, Reproducible Example - (Optional, but Recommended)

I don't know how I would be able to make an example of this.
We are using nextjs to server side render our app,
a basic table should do.

Screenshots or Videos (Optional)

Included above

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

None

Terms

• 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.