[CSP] "style-src" MUITabs and some other component have inline styles not nonced by the CreateEmotionCache

Steps to reproduce

Link to live example: https://github.com/Mateo-P/nonce-problem.git

Steps:
1 cp .env.example to .env
2. yarn install
3. yarn run dev
4. open the browser console (firefox is more descriptive in this case)

Current behavior

Expected behavior

not showing the error on console browser.

• remove inline style as most of the MUI components
• make it compatible with nonce assignment when creating the EmotionCache

Context

we are using remixjs+MUI and want to add CSP-Headers following these guides:
CSP-guide
remix-Styling

we added the nonce-value to the cache on CreateEmotionCache.tsx:

it works with most of the components and all sx's but we have found that some components including MUITabs have a default style="" which is not handled by the CSP nonce config followed in the documentation

on MUITabs docs by inspecting the component on the browser the default style="overflow:hidden;margin-bottom:0" is shown.

Your environment

System:
    OS: macOS 14.0
  Binaries:
    Node: 18.16.1 - /usr/local/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 9.6.6 - /opt/homebrew/bin/npm
  Browsers:
    Chrome: 120.0.6099.129
    Firefox: 
    Safari: 17.0
  npmPackages:
    @emotion/react: 11.11.3 => 11.11.1 
    @emotion/styled: 11.11.0 => 11.11.0 
    @mui/base: 5.0.0-beta.29 => 5.0.0-beta.27 
    @mui/core-downloads-tracker:  5.15.0 
    @mui/material: 5.15.2 => 5.15.0 
    @mui/private-theming:  5.15.0 
    @mui/styled-engine:  5.15.0 
    @mui/system:  5.15.0 
    @mui/types:  7.2.11 
    @mui/utils:  5.15.0 
    @mui/x-data-grid:  6.18.4 
    @mui/x-data-grid-pro: 6.18.6 => 6.18.4 
    @mui/x-license-pro: 6.10.2 => 6.10.2 
    @types/react: 18.2.46 => 18.2.45 
    react: 18.2.0 => 18.2.0 
    react-dom: 18.2.0 => 18.2.0 
    typescript: 5.3.3 => 5.3.3

Search keywords: nonce csp inline styles MUITabs style="overflow:hidden;margin-bottom:0"