diff --git a/docs/data/system/components/box/BoxSystemProps.js b/docs/data/system/components/box/BoxSystemProps.js index 9fd7fd1bd2d60d..93289c5217c00e 100644 --- a/docs/data/system/components/box/BoxSystemProps.js +++ b/docs/data/system/components/box/BoxSystemProps.js @@ -14,7 +14,7 @@ export default function BoxSystemProps() { border: '2px solid grey', }} > - This Box uses MUI System props for quick customization. + This Box uses MUI System properties through the sx prop. ); } diff --git a/docs/data/system/components/box/BoxSystemProps.tsx b/docs/data/system/components/box/BoxSystemProps.tsx index 9fd7fd1bd2d60d..93289c5217c00e 100644 --- a/docs/data/system/components/box/BoxSystemProps.tsx +++ b/docs/data/system/components/box/BoxSystemProps.tsx @@ -14,7 +14,7 @@ export default function BoxSystemProps() { border: '2px solid grey', }} > - This Box uses MUI System props for quick customization. + This Box uses MUI System properties through the sx prop. ); } diff --git a/docs/data/system/components/box/BoxSystemProps.tsx.preview b/docs/data/system/components/box/BoxSystemProps.tsx.preview index b0decb0904b5a3..f0286af8e32878 100644 --- a/docs/data/system/components/box/BoxSystemProps.tsx.preview +++ b/docs/data/system/components/box/BoxSystemProps.tsx.preview @@ -1,2 +1,2 @@ - This Box uses MUI System props for quick customization. + This Box uses MUI System properties through the sx prop. diff --git a/docs/data/system/components/box/box.md b/docs/data/system/components/box/box.md index 28c98da188788b..baa6cd3756b69f 100644 --- a/docs/data/system/components/box/box.md +++ b/docs/data/system/components/box/box.md @@ -36,10 +36,9 @@ The demo below replaces the `
system properties. You can use them as props directly on the component.",
"default": "Default",
"defaultComponent": "Default component",
"defaultValue": "Default value",
diff --git a/packages-internal/scripts/generate-llms-txt/src/processApi.ts b/packages-internal/scripts/generate-llms-txt/src/processApi.ts
index 386e534523f904..d4a1a60a34adb9 100644
--- a/packages-internal/scripts/generate-llms-txt/src/processApi.ts
+++ b/packages-internal/scripts/generate-llms-txt/src/processApi.ts
@@ -51,7 +51,6 @@ interface ApiJson {
filename?: string;
inheritance?: ApiInheritance;
demos?: string;
- cssComponent?: boolean;
deprecated?: boolean;
deprecationInfo?: string;
}
@@ -323,11 +322,6 @@ export function processApiJson(apiJson: ApiJson | string, options: ProcessApiOpt
markdown += `${classesTable}\n`;
}
- // Add CSS component note
- if (api.cssComponent) {
- markdown += `> **Note**: As a CSS utility, the \`${api.name}\` component also supports all system properties. You can use them as props directly on the component.\n\n`;
- }
-
// Add source code section
if (api.filename) {
markdown += '## Source code\n\n';
diff --git a/packages-internal/scripts/generate-llms-txt/test/processApi.test.ts b/packages-internal/scripts/generate-llms-txt/test/processApi.test.ts
index 38157b8fab1ca9..0375f45edd26d3 100644
--- a/packages-internal/scripts/generate-llms-txt/test/processApi.test.ts
+++ b/packages-internal/scripts/generate-llms-txt/test/processApi.test.ts
@@ -329,21 +329,6 @@ describe('processApi', () => {
expect(result).to.include('You can use `MuiButton` to change the default props');
});
- it('should handle CSS component', () => {
- const apiJson = {
- name: 'Box',
- imports: ["import Box from '@mui/material/Box';"],
- props: {},
- cssComponent: true,
- };
-
- const result = processApiJson(apiJson);
-
- expect(result).to.include(
- 'As a CSS utility, the `Box` component also supports all system properties',
- );
- });
-
it('should handle source code section', () => {
const apiJson = {
name: 'Component',
diff --git a/skills/material-ui-styling/AGENTS.md b/skills/material-ui-styling/AGENTS.md
index 14c99479578783..3b2b6b88f7af45 100644
--- a/skills/material-ui-styling/AGENTS.md
+++ b/skills/material-ui-styling/AGENTS.md
@@ -121,7 +121,7 @@ To reuse `sx` logic inside `styled()`, use theme's `unstable_sx` (see [styled()
## Imports and consistency
- In application code, prefer one-level imports from packages (for example `@mui/material/Button`) to avoid pulling the entire barrel.
-- `Box` / `Stack` / `Typography` / `Grid`: system layout props apply directly on these; other components use `sx` for system shortcuts, not arbitrary CSS prop shortcuts on the component itself.
+- Use `sx` for system layout shortcuts (`p`, `gap`, `mt`, etc.) on MUI components; use component props only for behavior documented by that component.
---