Declare font size for html element for various breakpoints in MaterialUI

Question

I'm working for the first time with materialUI instead of CSS/SASS and I'm having trouble with the CSS reset. What I usually do is that I set the font-size property on the HTML element to 62.5%, so that 1rem = 10px across paddings/margins/font-sizes. Additionally, I define the same thing across my breakpoints, which is what I'm struggling with.

Currently, this is what I have:

    components: {
        MuiCssBaseline: {
            styleOverrides: {
                html: { fontSize: '62.5%' },
            },
        },
    }   

This works in general but means that across all devices at the moment 1rem = 10px. I want to set the font-size property for phones for example to 50%, so that 1rem = 8px. Is there a way to basically write media queries inside the theme so that I can adjust what 1rem means across the different breakpoints?

Answer 1

You can set properties based on breakpoints in MUI (hope you are using v5+)

Below Example, child component vanishes when screen size goes beyond xl and shows when its below xs

<Paper sx={{ display: { xl: 'none', xs: 'block' } }}>
//child component
</Paper>

In your case,

<RootElement sx={{ fontSize: { xl: '10px', xs: '8px' } }} />

refer the official doc: link