Summary
Here the typography shorthand has a string type as it's later being spread into the element.
We use responsive typography as in the following example:
<Typography
sx={{
typography: {
xs: 'Body S',
sm: 'Body M',
md: 'any string is valid here',
},
}}
>
The size of this text changes based on the screen size. Check it out! <br />
In most cases, we will reuse the same typography variant across breakpoints. But
in case you need to override it, refer to the code in this example.
</Typography>and there's no way for TypeScript to catch the types inconsistency early in the process.
I tried a bunch of things to redeclare typography prop but with no luck. E.g.:
// attempt 1
declare module '@mui/system' {
interface SxProps<Theme = MUITheme> extends MUISxProps<Theme> {
typography?: {
[key in Breakpoint]?: FlashPackTypographyVariant;
} | FlashPackTypographyVariant;
}
}
// attempt 2
declare module '@mui/system' {
interface TypographyPropsVariantOverrides {
// Your custom typography variants (as before)
}
interface AliasesCSSProperties {
// Add your custom property here
typography?: {
[key in Breakpoint]?: FlashPackTypographyVariant;
} | FlashPackTypographyVariant;
}
// This ensures the custom property is recognized in the theme
interface ThemeOptions {
typography?: TypographyOptions | ((theme: Theme) => TypographyOptions);
}
}
// attempt 3
declare module '@mui/material/styles' {
interface CSSProperties {
typography?: {
[key in Breakpoint]?: FlashPackTypographyVariant;
} | FlashPackTypographyVariant;
}
}I'd love to get some tips if there's a way to override typography in this case!
Examples
No response
Motivation
No response
Search keywords: typography, typescript, override, generic
Summary
Here the
typographyshorthand has astringtype as it's later being spread into the element.We use responsive typography as in the following example:
and there's no way for TypeScript to catch the types inconsistency early in the process.
I tried a bunch of things to redeclare typography prop but with no luck. E.g.:
I'd love to get some tips if there's a way to override typography in this case!
Examples
No response
Motivation
No response
Search keywords: typography, typescript, override, generic