Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

@mui/material: incorrect responsiveFontSizes return type when using CssVarsTheme as input #42760

Open
jxdp opened this issue Jun 26, 2024 · 2 comments · May be fixed by #42786
Open

@mui/material: incorrect responsiveFontSizes return type when using CssVarsTheme as input #42760

jxdp opened this issue Jun 26, 2024 · 2 comments · May be fixed by #42786
Assignees
Labels
customization: css Design CSS customizability customization: theme Centered around the theming features good first issue Great for first contributions. Enable to learn the contribution process. package: system Specific to @mui/system typescript

Comments

@jxdp
Copy link

jxdp commented Jun 26, 2024

Steps to reproduce

No response

Current behavior

image

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 jxdp added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Jun 26, 2024
@zannager zannager added package: system Specific to @mui/system customization: theme Centered around the theming features customization: css Design CSS customizability labels Jun 26, 2024
@siriwatknp siriwatknp added typescript and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Jun 28, 2024
@siriwatknp
Copy link
Member

@jxdp That looks good to me, do you want to submit a PR?

@siriwatknp siriwatknp added the good first issue Great for first contributions. Enable to learn the contribution process. label Jun 28, 2024
jxdp added a commit to jxdp/material-ui that referenced this issue Jun 29, 2024
@jxdp
Copy link
Author

jxdp commented Jun 29, 2024

@jxdp That looks good to me, do you want to submit a PR?

Sure thing: #42786

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
customization: css Design CSS customizability customization: theme Centered around the theming features good first issue Great for first contributions. Enable to learn the contribution process. package: system Specific to @mui/system typescript
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants