54 lines
2.1 KiB
JavaScript
54 lines
2.1 KiB
JavaScript
'use client';
|
|
|
|
import * as React from 'react';
|
|
import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
|
|
import useId from '@mui/utils/useId';
|
|
import GlobalStyles from '../GlobalStyles';
|
|
import useThemeWithoutDefault from '../useThemeWithoutDefault';
|
|
|
|
/**
|
|
* This hook returns a `GlobalStyles` component that sets the CSS layer order (for server-side rendering).
|
|
* Then on client-side, it injects the CSS layer order into the document head to ensure that the layer order is always present first before other Emotion styles.
|
|
*/
|
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
export default function useLayerOrder(theme) {
|
|
var upperTheme = useThemeWithoutDefault();
|
|
var id = useId() || '';
|
|
var modularCssLayers = theme.modularCssLayers;
|
|
var layerOrder = 'mui.global, mui.components, mui.theme, mui.custom, mui.sx';
|
|
if (!modularCssLayers || upperTheme !== null) {
|
|
// skip this hook if upper theme exists.
|
|
layerOrder = '';
|
|
} else if (typeof modularCssLayers === 'string') {
|
|
layerOrder = modularCssLayers.replace(/mui(?!\.)/g, layerOrder);
|
|
} else {
|
|
layerOrder = "@layer ".concat(layerOrder, ";");
|
|
}
|
|
useEnhancedEffect(function () {
|
|
var head = document.querySelector('head');
|
|
if (!head) {
|
|
return;
|
|
}
|
|
var firstChild = head.firstChild;
|
|
if (layerOrder) {
|
|
var _firstChild$hasAttrib;
|
|
// Only insert if first child doesn't have data-mui-layer-order attribute
|
|
if (firstChild && (_firstChild$hasAttrib = firstChild.hasAttribute) != null && _firstChild$hasAttrib.call(firstChild, 'data-mui-layer-order') && firstChild.getAttribute('data-mui-layer-order') === id) {
|
|
return;
|
|
}
|
|
var styleElement = document.createElement('style');
|
|
styleElement.setAttribute('data-mui-layer-order', id);
|
|
styleElement.textContent = layerOrder;
|
|
head.prepend(styleElement);
|
|
} else {
|
|
var _head$querySelector;
|
|
(_head$querySelector = head.querySelector("style[data-mui-layer-order=\"".concat(id, "\"]"))) == null || _head$querySelector.remove();
|
|
}
|
|
}, [layerOrder, id]);
|
|
if (!layerOrder) {
|
|
return null;
|
|
}
|
|
return /*#__PURE__*/_jsx(GlobalStyles, {
|
|
styles: layerOrder
|
|
});
|
|
} |