[question] Is there a way to make mui css codes external instead of internal?

srbadni commented 1 year ago

Order ID or Support key 💳 (optional)

59340

Duplicates

[X] I have searched the existing issues

Latest version

[x] I have tested the latest version

The problem in depth 🔍

when i see chrome inspect elements, in my <head>, i had many <style data-emotion="css" data-s=""></style> and inside of it was mui css codes like :.css-jwafdq-MuiButtonBase-root-MuiPickersDay-root-MuiDateRangePickerDay-day.Mui-selected:hover{will-change:background-color;background-color:#1565c0;}

But my problem is why the styles go directly to the head tag like this and were not bundled in a stylesheet. I wanted to know if there is a way to prevent this approach and these codes do not appear in the head tag and are created in an external file.

Screenshot 2023-08-28 121754

Your environment 🌎

`npx @mui/envinfo`

``` chrome browser. System: OS: Windows 10 10.0.19045 Binaries: Node: 18.14.2 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD npm: 9.8.1 - C:\Program Files\nodejs\npm.CMD Browsers: Chrome: Not Found Edge: Spartan (44.19041.1266.0), Chromium (116.0.1938.62) npmPackages: @emotion/react: ^11.10.6 => 11.10.8 @emotion/styled: ^11.10.6 => 11.10.8 @mui/base: 5.0.0-alpha.127 @mui/core-downloads-tracker: 5.12.2 @mui/icons-material: ^5.11.11 => 5.11.16 @mui/lab: ^5.0.0-alpha.121 => 5.0.0-alpha.128 @mui/material: ^5.11.11 => 5.12.2 @mui/private-theming: 5.12.0 @mui/styled-engine: 5.12.0 @mui/styles: ^5.11.11 => 5.12.0 @mui/system: 5.12.1 @mui/types: 7.2.4 @mui/utils: 5.12.0 @mui/x-date-pickers: ^6.0.0 => 6.3.0 @mui/x-date-pickers-pro: ^5.0.20 => 5.0.20 @mui/x-license-pro: ^5.17.12 => 5.17.12 @types/react: 18.0.28 => 18.0.28 react: ^18.2.0 => 18.2.0 react-dom: 18.2.0 => 18.2.0 typescript: 4.9.5 => 4.9.5 ```

flaviendelangle commented 1 year ago

I'm transferring to the core repository because this is related to the styling engine and not specific to the X components cc @mnajdova

mnajdova commented 1 year ago

This is not currently possible with emotion. Check https://github.com/emotion-js/emotion/blob/main/docs/extract-static.mdx for more details on the reasoning around this.

However, this will be possible in the future with the https://github.com/mui/material-ui/issues/38137

mui / material-ui