'How to set textTransform to all components globally?

I want to capitalize all text in my muiv5 project. It should be default to capitalize unless stated in sx or styled on the component itself.

What I've tried is:

<ThemeProvider theme={theme}>
    <IntlProvider
        locale="en"
        defaultLocale="en"
        messages={AppLocale.en.messages}
    >
        <CssBaseline />
        <GlobalStyles styles={{ root: { textTransform: "capitalize" } }} />
        <Component {...pageProps} />
    </IntlProvider>
</ThemeProvider>

But it doesn't work. Any best way to do this? Even createTheme is not working for me.

Note: I don't want to use makeStyles. Using Next.js.

cssreactjsmaterial-uinext.js


Solution 1:[1]

You can allow all the children of body to inherit the textTransform value.

<GlobalStyles styles={{ body: { textTransform: "capitalize" } }} />

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 juliomalves

Related Questions