我将 React SSR 从纯@emotion 切换到了material-ui 5.0,但样式将不再被提取。ID 提取createExtractCriticalToChunks
工作正常,但来自情感的 cache.inserted 对象现在始终是一个空对象。我在这里做错了什么?
"@emotion/babel-plugin": "^11.3.0",
"@emotion/cache": "^11.6.0",
"@emotion/core": "11.0.0",
"@emotion/css": "^11.5.0",
"@emotion/react": "^11.6.0",
"@emotion/server": "^11.4.0",
"@emotion/styled": "^11.6.0",
"@mui/icons-material": "5.0.0",
"@mui/lab": "5.0.0-alpha.47",
"@mui/material": "5.0.0",
"@mui/styles": "5.0.0",
"@mui/utils": "5.0.0",
"@mui/x-data-grid": "5.0.0-beta.1",
Run Code Online (Sandbox Code Playgroud)
HTML:
"@emotion/babel-plugin": "^11.3.0",
"@emotion/cache": "^11.6.0",
"@emotion/core": "11.0.0",
"@emotion/css": "^11.5.0",
"@emotion/react": "^11.6.0",
"@emotion/server": "^11.4.0",
"@emotion/styled": "^11.6.0",
"@mui/icons-material": "5.0.0",
"@mui/lab": "5.0.0-alpha.47",
"@mui/material": "5.0.0",
"@mui/styles": "5.0.0",
"@mui/utils": "5.0.0",
"@mui/x-data-grid": "5.0.0-beta.1",
Run Code Online (Sandbox Code Playgroud)
提取的 ID:
<style data-emotion="css-global 1vs7qi2">html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;box-sizing:border-box;-webkit-text-size-adjust:100%;}*,*::before,*::after{box-sizing:inherit;}strong,b{font-weight:700;}body{margin:0;color:#29343D;line-height:1.5;font-size:1rem;font-family:Inter,sans-serif;font-weight:400;background-color:#fff;}@media print{body{background-color:#fff;}}body::backdrop{background-color:#fff;}</style><style data-emotion="css-global 1vs7qi2">html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;box-sizing:border-box;-webkit-text-size-adjust:100%;}*,*::before,*::after{box-sizing:inherit;}strong,b{font-weight:700;}body{margin:0;color:#29343D;line-height:1.5;font-size:1rem;font-family:Inter,sans-serif;font-weight:400;background-color:#fff;}@media print{body{background-color:#fff;}}body::backdrop{background-color:#fff;}</style><style data-emotion="css-global r7h3of">*{margin:0;padding:0;box-sizing:border-box;}html{width:100%;height:100%;-webkit-overflow-scrolling:touch;}body{width:100%;height:100%;}#root{width:100%;height:100%;}input[type=number]{-moz-appearance:textfield;}input[type=number]::-webkit-outer-spin-button{margin:0;-webkit-appearance:none;}input[type=number]::-webkit-inner-spin-button{margin:0;-webkit-appearance:none;}textarea::-webkit-input-placeholder{color:#919FAB;}textarea::-moz-placeholder{opacity:1;color:#919FAB;}textarea:-ms-input-placeholder{color:#919FAB;}textarea::-webkit-input-placeholder{color:#919FAB;}textarea::-moz-placeholder{color:#919FAB;}textarea:-ms-input-placeholder{color:#919FAB;}textarea::placeholder{color:#919FAB;}img{display:block;max-width:100%;}.blur-up{-webkit-filter:blur(5px);-webkit-filter:blur(5px);filter:blur(5px);-webkit-transition:filter 400ms,-webkit-filter 400ms;transition:filter 400ms,-webkit-filter 400ms;}.blur-up.lazyloaded{-webkit-filter:blur(0);-webkit-filter:blur(0);filter:blur(0);}</style><style data-emotion="css …
Run Code Online (Sandbox Code Playgroud)javascript emotion material-ui server-side-rendering emotion-js