Open goodwin64 opened 1 month ago
Instead of allowing type overrides in the sx
prop's typography
property, we should enforce type checking. For the Typography component, we can make the following changes:
--- a/packages/mui-material/src/Typography/Typography.d.ts
+++ b/packages/mui-material/src/Typography/Typography.d.ts
@@ -1,6 +1,6 @@
import * as React from 'react';
import { OverridableStringUnion } from '@mui/types';
-import { SxProps, SystemProps } from '@mui/system';
+import { SxProps, SystemProps, Breakpoint } from '@mui/system';
import { Theme } from '../styles';
import { OverrideProps, OverridableComponent } from '../OverridableComponent';
import { Variant } from '../styles/createTypography';
@@ -43,7 +43,9 @@ export interface TypographyOwnProps extends SystemProps<Theme> {
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
- sx?: SxProps<Theme>;
+ sx?: SxProps<Theme> & {
+ typography?: string | Partial<Record<Breakpoint, TypographyProps['variant']>>;
+ };
/**
* Applies the theme typography styles.
* @default 'body1'
We cannot implement this in AliasesCSSProperties
because the Variant
type from Material UI is not available in the MUI System. While we may need this change for all sx
types across all Material UI components, applying it to the Typography component is a good start.
In-case anybody is creating a new PR, make sure to add a TypeScript test case.
Hello @ZeeshanTamboli! I'm beginning to work on a fix for this issue. Could you please assign it to me?
@Sergio16T Assigned!
Hello @ZeeshanTamboli! I opened a PR with fix. Ready for review
Is this issue already resolved? If not, I'm interested in working on it.
Hi @rkumar261 the dev work is complete. PR is awaiting final review from maintainers.
Ok @Sergio16T, thanks
Summary
Here the
typography
shorthand has astring
type 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