[internal] Add `internal` slot to properly generate components CSS layer by siriwatknp · Pull Request #20763 · mui/mui-x

siriwatknp · 2025-12-24T06:58:55Z

closes #20486

Before: https://stackblitz.com/edit/n6ptahvr?file=src%2Findex.tsx,src%2FDemo.tsx
After: https://stackblitz.com/edit/zb41agom?file=src%2Findex.tsx,package.json

Issue summary

When modularCssLayer is enabled from the theme, internal components that uses styled without slot
generate styles with custom layer which overrides the components (MUI components) causing bugs like in this sandbox.

Solution

Add slot: 'internal' (actually can be any name, just that internal feels the most explicit) + shouldForwardProp: undefined to preserve the same behavior.

Feature Matrix: slot + shouldForwardProp (no name)

Feature	Enabled?
Theme styleOverrides	❌
Theme variants	❌
sx prop	same as before
CSS layer 'components'	✅
slotShouldForwardProp	same as before
Label (dev)	❌
DisplayName (dev)	❌

script to find internal files

import fs from 'fs';
import path from 'path';

function walkDir(dir, callback) {
  const files = fs.readdirSync(dir);
  for (const file of files) {
    const filepath = path.join(dir, file);
    const stat = fs.statSync(filepath);
    if (stat.isDirectory()) {
      if (file !== 'node_modules' && file !== '__tests__' && file !== 'test') {
        walkDir(filepath, callback);
      }
    } else {
      callback(filepath);
    }
  }
}

const results = [];

const packages = [
  'packages/x-date-pickers',
  'packages/x-date-pickers-pro',
  'packages/x-charts',
  'packages/x-charts-pro',
  'packages/x-data-grid',
  'packages/x-data-grid-pro',
  'packages/x-data-grid-premium',
  'packages/x-tree-view',
  'packages/x-tree-view-pro',
];

for (const pkg of packages) {
  const srcDir = path.join(pkg, 'src');
  if (!fs.existsSync(srcDir)) continue;

  walkDir(srcDir, (file) => {
    if (!/\.(ts|tsx)$/.test(file)) return;
    if (/\.(test|spec)\.(ts|tsx)$/.test(file)) return;

    const content = fs.readFileSync(file, 'utf-8');

    // Check if file uses styled from @mui/material/styles or @mui/system
    const hasStyledImport =
      /import\s+{[^}]*styled[^}]*}\s+from\s+['"]@mui\/(material\/styles|system)['"]/.test(content);

    if (!hasStyledImport) return;

    // Find lines with styled() calls
    const lines = content.split('\n');

    for (let i = 0; i < lines.length; i++) {
      const line = lines[i];

      // Skip comments
      if (/^\s*\/\//.test(line) || /^\s*\*/.test(line)) continue;

      // Match styled('tag' or styled(Component
      if (/styled\s*\(/.test(line)) {
        // Look at context (this line + next 5 lines)
        const contextLines = lines.slice(i, i + 6).join('\n');

        // Check if this styled call has options object with name: 'Mui
        const hasOptionsWithMuiName = /styled\s*\([^,]+,\s*\{[^}]*name:\s*['"]Mui/.test(
          contextLines,
        );

        if (!hasOptionsWithMuiName) {
          results.push(file);
          break; // Only report file once
        }
      }
    }
  });
}

console.log('Files with styled() missing Mui name:\n');
results.sort().forEach((f) => console.log(`${f}`));
console.log(`\nTotal: ${results.length} files`);

I have followed (at least) the PR section of the contributing guide.

mui-bot · 2025-12-24T07:00:58Z

Deploy preview: https://deploy-preview-20763--material-ui-x.netlify.app/

Bundle size report

Bundle	Parsed size	Gzip size
@mui/x-data-grid	🔺+549B^(+0.14%)	🔺+91B^(+0.07%)
@mui/x-data-grid-pro	🔺+635B^(+0.13%)	🔺+255B^(+0.17%)
@mui/x-data-grid-premium	🔺+678B^(+0.10%)	🔺+137B^(+0.07%)
@mui/x-charts	🔺+301B^(+0.09%)	🔺+38B^(+0.04%)
@mui/x-charts-pro	🔺+505B^(+0.11%)	🔺+53B^(+0.04%)
@mui/x-charts-premium	🔺+462B^(+0.10%)	🔺+46B^(+0.03%)
@mui/x-date-pickers	🔺+156B^(+0.07%)	🔺+26B^(+0.04%)
@mui/x-date-pickers-pro	🔺+210B^(+0.07%)	🔺+40B^(+0.05%)
@mui/x-tree-view	0B^(0.00%)	0B^(0.00%)
@mui/x-tree-view-pro	0B^(0.00%)	0B^(0.00%)

Details of bundle changes

Generated by 🚫 dangerJS against 237ca4c

codspeed-hq · 2025-12-24T07:21:34Z

CodSpeed Performance Report

Merging #20763 will not alter performance

_{Comparing siriwatknp:fix/internal-name (237ca4c) with master (9499b99)¹}

Summary

✅ 14 untouched

No successful run was found on master (3caac97) during the generation of this report, so 9499b99 was used instead as the comparison base. There might be some changes unrelated to this pull request in this report. ↩

alexfauquette · 2025-12-24T09:00:37Z

Just for curiosity, what would hapend if we set "root" to the slot?

siriwatknp · 2025-12-24T09:05:37Z

Just for curiosity, what would hapend if we set "root" to the slot?

in this case, it's not difference but internal is more explicit.

add internal slot to properly generate components CSS layer

011e5bc

siriwatknp requested a review from a team as a code owner December 24, 2025 06:58

siriwatknp added type: bug It doesn't behave as expected. scope: data grid Changes related to the data grid. scope: pickers Changes related to the date/time pickers. scope: charts Changes related to the charts. labels Dec 24, 2025

siriwatknp added 4 commits December 24, 2025 15:04

fix params

03588ea

use shouldForwardProp

02d151b

remove duplicate keys

f722be2

fix the rest

92eec68

alexfauquette approved these changes Dec 24, 2025

View reviewed changes

alexfauquette requested review from LukasTy and flaviendelangle December 24, 2025 08:58

siriwatknp added 2 commits December 24, 2025 16:24

remove unwanted shouldForwardProp

a59b55d

trigger ci

237ca4c

siriwatknp merged commit 508ac91 into mui:master Jan 5, 2026
22 checks passed

brijeshb42 added the internal Behind-the-scenes enhancement. Formerly called “core”. label Jan 8, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[internal] Add `internal` slot to properly generate components CSS layer#20763

[internal] Add `internal` slot to properly generate components CSS layer#20763
siriwatknp merged 7 commits intomui:masterfrom
siriwatknp:fix/internal-name

siriwatknp commented Dec 24, 2025 •

edited

Loading

Uh oh!

mui-bot commented Dec 24, 2025 •

edited

Loading

Uh oh!

codspeed-hq bot commented Dec 24, 2025 •

edited

Loading

Uh oh!

alexfauquette commented Dec 24, 2025

Uh oh!

siriwatknp commented Dec 24, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Uh oh!

Conversation

siriwatknp commented Dec 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Issue summary

Solution

Uh oh!

mui-bot commented Dec 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Bundle size report

Uh oh!

codspeed-hq bot commented Dec 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

CodSpeed Performance Report

Merging #20763 will not alter performance

Summary

Footnotes

Uh oh!

alexfauquette commented Dec 24, 2025

Uh oh!

siriwatknp commented Dec 24, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

siriwatknp commented Dec 24, 2025 •

edited

Loading

mui-bot commented Dec 24, 2025 •

edited

Loading

codspeed-hq bot commented Dec 24, 2025 •

edited

Loading