@mui/material-nextjs
Version:
Collection of utilities for integration between Material UI and Next.js.
40 lines (38 loc) • 1.35 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = createEmotionCache;
var _cache = _interopRequireDefault(require("@emotion/cache"));
const isBrowser = typeof document !== 'undefined';
// On the client side, Create a meta tag at the top of the <head> and set it as insertionPoint.
// This assures that MUI styles are loaded first.
// It allows developers to easily override MUI styles with other styling solutions, like CSS modules.
function createEmotionCache(options) {
let insertionPoint;
if (isBrowser) {
const emotionInsertionPoint = document.querySelector('meta[name="emotion-insertion-point"]');
insertionPoint = emotionInsertionPoint ?? undefined;
}
const {
enableCssLayer,
...rest
} = options ?? {};
const emotionCache = (0, _cache.default)({
key: 'mui',
insertionPoint,
...rest
});
if (enableCssLayer) {
const prevInsert = emotionCache.insert;
emotionCache.insert = (...args) => {
// ignore styles that contain layer order (`@layer ...` without `{`)
if (!args[1].styles.match(/^@layer\s+[^{]*$/)) {
args[1].styles = `@layer mui {${args[1].styles}}`;
}
return prevInsert(...args);
};
}
return emotionCache;
}