mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://mui.com/material-ui/
MIT License
93.9k stars 32.26k forks source link

[joy-ui] fontSize property on MUI Icons does not comply with TypeScript rules #40359

Open CeuxDruman opened 10 months ago

CeuxDruman commented 10 months ago

Duplicates

Latest version

Steps to reproduce 🕹

Link to live example: https://codesandbox.io/p/sandbox/blissful-night-4v3x2j?file=%2Fsrc%2FDemo.tsx (The one available in the offcial "Material UI Icons Size doc")

As you can see, it happens even in the live example codesandbox IDE of the official doc.

Steps:

  1. Include any Material UI Icon in your code. i.e:
    import Person from '@mui/icons-material/Person';
    ...
    <Person />
  2. Add it the fontSize property with any of the officially supported sizes (xs, sm, md, lg, xl, xl2, xl3 or xl4):
    import Person from '@mui/icons-material/Person';
    ...
    <Person fontSize="xl2" />
  3. You will see the icon size applied, but the code will be highlighted with a TypeScript error telling that the only supported sizes are "small, medium or large", while none of these values actually works if you followed the "Material UI Icons Installation instructions".

image

Current behavior 😯

Expected behavior 🤔

Context 🔦

Just trying to customize the size of icons inside my app with the official fontSize prop to avoid css granular customization.

Your environment 🌎

npx @mui/envinfo ``` System: OS: Windows 11 10.0.22631 Binaries: Node: 18.17.0 - C:\Program Files\nodejs\node.EXE Yarn: Not Found npm: 9.6.7 - C:\Program Files\nodejs\npm.CMD Browsers: Chrome: 120.0.6099.111 (Build oficial) (64 bits) Firefox: 121.0 (64-bit) Edge: 120.0.2210.77 (Compilación oficial) (64 bits) npmPackages: @emotion/react: ^11.11.3 => 11.11.3 @emotion/styled: ^11.11.0 => 11.11.0 @mui/base: 5.0.0-beta.29 @mui/core-downloads-tracker: 5.15.2 @mui/icons-material: ^5.15.2 => 5.15.2 @mui/joy: ^5.0.0-beta.20 => 5.0.0-beta.20 @mui/material: ^5.15.2 => 5.15.2 @mui/private-theming: 5.15.2 @mui/styled-engine: 5.15.2 @mui/system: ^5.15.2 => 5.15.2 @mui/types: 7.2.11 @mui/utils: 5.15.2 @types/react: 18.2.20 => 18.2.20 react: 18.2.0 => 18.2.0 react-dom: 18.2.0 => 18.2.0 typescript: 5.1.6 => 5.1.6 ```
tsconfig ``` { "compilerOptions": { "target": "es5", "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, "strict": true, "forceConsistentCasingInFileNames": true, "noEmit": true, "esModuleInterop": true, "module": "esnext", "moduleResolution": "bundler", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", "incremental": true, "plugins": [ { "name": "next" } ], "paths": { "@/*": ["./src/*"], "@mui/material": ["./node_modules/@mui/joy"] } }, "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], "exclude": ["node_modules"] } ```
siriwatknp commented 10 months ago

I think for workaround, you can add this to your app or theme file:

import type { TypographySystem } from '@mui/joy/styles';

type FontSizeOverrides = { [k in keyof TypographySystem]: true };

declare module "@mui/material/SvgIcon" {
  interface SvgIconPropsSizeOverrides extends FontSizeOverrides {}
}
GziAzman commented 1 month ago

@siriwatknp Not sure about keys in TypographySystem, as it lists "body-sm", "body-md", etc. What we want, from joy-ui documentation are sizes from xs to xl4

I managed to workaround the issue, that way:

// global.d.ts
import '@mui/joy/styles';

type SvgIconFontSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xl2' | 'xl3' | 'xl4';

type FontSizeOverrides = { [k in SvgIconFontSize]: true };

declare module '@mui/material/SvgIcon' {
  interface SvgIconPropsSizeOverrides extends FontSizeOverrides {}
}

Values from SvgIconOwnProps.fontSize (large/medium/small) are still suggested, but at least, I can put the good ones, without crashing my build.

image