Skip to content

[docs] Add how to customize typography with ScopedCssBaseline#47962

Open
mvlanga wants to merge 5 commits intomui:masterfrom
mvlanga:add-description-on-how-to-customize-typography-with-scoped-css-baseline
Open

[docs] Add how to customize typography with ScopedCssBaseline#47962
mvlanga wants to merge 5 commits intomui:masterfrom
mvlanga:add-description-on-how-to-customize-typography-with-scoped-css-baseline

Conversation

@mvlanga
Copy link

@mvlanga mvlanga commented Mar 13, 2026

As discussed in #47928 I've updated the docs to also describe how to apply styleOverrides to the ScopedCssBaseline component instead of the regular CssBaseline.

Closes #47928

…aseline instead of regular CssBaseline component
@mui-bot
Copy link

mui-bot commented Mar 13, 2026

Netlify deploy preview

Bundle size report

Bundle Parsed size Gzip size
@mui/material 0B(0.00%) 0B(0.00%)
@mui/lab 0B(0.00%) 0B(0.00%)
@mui/system 0B(0.00%) 0B(0.00%)
@mui/utils 0B(0.00%) 0B(0.00%)

Details of bundle changes

Generated by 🚫 dangerJS against f1e7e28

@ZeeshanTamboli ZeeshanTamboli added docs Improvements or additions to the documentation. scope: typography Changes related to typography. component: CssBaseline The React component. type: enhancement It’s an improvement, but we can’t make up our mind whether it's a bug fix or a new feature. v7.x needs cherry-pick The PR should be cherry-picked to master after merge. labels Mar 14, 2026
// ...
return (
<ThemeProvider theme={theme}>
<CssBaseline />
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add a comment here:

Suggested change
<CssBaseline /> // Or <ScopedCssBaseline />

Copy link
Member

@ZeeshanTamboli ZeeshanTamboli left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@mvlanga After contemplating about this for a bit, I don't think we should document @font-face under MuiScopedCssBaseline.

ScopedCssBaseline applies styles to its root slot, so its styleOverrides are meant for styles scoped to that component subtree. @font-face is a global at-rule and should be declared globally, for example through MuiCssBaseline or GlobalStyles, even if the consuming UI is wrapped in ScopedCssBaseline.

@ZeeshanTamboli ZeeshanTamboli removed type: enhancement It’s an improvement, but we can’t make up our mind whether it's a bug fix or a new feature. v7.x needs cherry-pick The PR should be cherry-picked to master after merge. labels Mar 14, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

component: CssBaseline The React component. docs Improvements or additions to the documentation. scope: typography Changes related to typography.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[docs] Describe how to use self-hosed fonts with ScopedCssBaseline instead of CssBaseline as it is different

3 participants