material-ui
material-ui copied to clipboard
@mui/material: incorrect responsiveFontSizes return type when using CssVarsTheme as input
Steps to reproduce
No response
Current behavior
Expected behavior
responsiveFontSizes should return the same type of theme that it was given
Context
Switching to the CSS vars theme provider (primarily for dark mode), but still wanting to use the responsive fonts helper.
For now I am simply casting the return type back to CssVarsTheme, but the below change to packages/mui-material/src/styles/responsiveFontSizes.d.ts fixes the issue:
import { Breakpoint } from '@mui/system';
import { Typography } from './createTypography';
export interface ResponsiveFontSizesOptions {
breakpoints?: Breakpoint[];
disableAlign?: boolean;
factor?: number;
variants?: Array<keyof Typography>;
}
export default function responsiveFontSizes<T extends { typography: Typography }>(
theme: T,
options?: ResponsiveFontSizesOptions,
): T;
Your environment
npx @mui/envinfo
System:
OS: macOS 11.6.5
Binaries:
Node: 20.10.0 - ~/.nvm/versions/node/v20.10.0/bin/node
npm: 10.2.3 - ~/.nvm/versions/node/v20.10.0/bin/npm
pnpm: 8.15.4 - ~/.nvm/versions/node/v20.10.0/bin/pnpm
Browsers:
Chrome: 126.0.6478.116
Edge: Not Found
Safari: 14.1.2
npmPackages:
@emotion/react: ^11.11.4 => 11.11.4
@emotion/styled: ^11.11.5 => 11.11.5
@mui/base: 5.0.0-beta.40
@mui/core-downloads-tracker: 5.15.20
@mui/icons-material: ^5.15.20 => 5.15.20
@mui/material: ^5.15.20 => 5.15.20
@mui/material-nextjs: ^5.15.11 => 5.15.11
@mui/private-theming: 5.15.20
@mui/styled-engine: 5.15.14
@mui/system: 5.15.20
@mui/types: 7.2.14
@mui/utils: 5.15.20
@types/react: ^18 => 18.3.3
react: ^18 => 18.3.1
react-dom: ^18 => 18.3.1
typescript: ^5 => 5.5.2
Search keywords: theme, css, responsive
@jxdp That looks good to me, do you want to submit a PR?
@jxdp That looks good to me, do you want to submit a PR?
Sure thing: https://github.com/mui/material-ui/pull/42786