Open CeuxDruman opened 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 {}
}
@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.
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:
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 🌎
``` 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 ```npx @mui/envinfo
``` { "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"] } ```tsconfig