Skip to content

[Typography] Fix styleOverrides, variants, and remaining colors #34444

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.

Sign up for GitHub

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

Open
wants to merge 3 commits into
base: v5.x
Choose a base branch
from
+76 −5
Open

[Typography] Fix styleOverrides, variants, and remaining colors #34444

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7152cf7
Typography: fix styleOverrides and variants to work
emillaine Sep 23, 2022
211d693
Typography: fix untransformed palette colors e.g. "success"
emillaine Sep 23, 2022
d3284d8
Fix "combines system properties with the sx prop"
emillaine Sep 23, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 17 additions & 5 deletions packages/mui-material/src/Typography/Typography.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import { unstable_extendSxProp as extendSxProp } from '@mui/system';
import { unstable_extendSxProp as extendSxProp, getPath } from '@mui/system';
import { unstable_composeClasses as composeClasses } from '@mui/base';
import styled from '../styles/styled';
import styled, { rootShouldForwardProp } from '../styles/styled';
import useThemeProps from '../styles/useThemeProps';
import capitalize from '../utils/capitalize';
import { getTypographyUtilityClass } from './typographyClasses';
Expand All @@ -28,6 +28,7 @@ const useUtilityClasses = (ownerState) => {
export const TypographyRoot = styled('span', {
name: 'MuiTypography',
slot: 'Root',
shouldForwardProp: (prop) => rootShouldForwardProp(prop) && prop !== 'color',
overridesResolver: (props, styles) => {
const { ownerState } = props;

Expand All @@ -42,6 +43,10 @@ export const TypographyRoot = styled('span', {
},
})(({ theme, ownerState }) => ({
margin: 0,
color:
getPath(theme, `palette.${ownerState.color}.main`, false) ||
getPath(theme, `palette.${ownerState.color}`, false) ||
ownerState.color,
...(ownerState.variant && theme.typography[ownerState.variant]),
...(ownerState.align !== 'inherit' && {
textAlign: ownerState.align,
Expand Down Expand Up @@ -88,25 +93,27 @@ const transformDeprecatedColors = (color) => {

const Typography = React.forwardRef(function Typography(inProps, ref) {
const themeProps = useThemeProps({ props: inProps, name: 'MuiTypography' });
const color = transformDeprecatedColors(themeProps.color);
const props = extendSxProp({ ...themeProps, color });
const props = { ...extendSxProp(themeProps), color: themeProps.color };

const {
align = 'inherit',
className,
// eslint-disable-next-line react/prop-types
color,
component,
gutterBottom = false,
noWrap = false,
paragraph = false,
variant = 'body1',
variantMapping = defaultVariantMapping,
sx,
...other
} = props;

const ownerState = {
...props,
align,
color,
color: transformDeprecatedColors(color),
className,
component,
gutterBottom,
Expand All @@ -129,6 +136,11 @@ const Typography = React.forwardRef(function Typography(inProps, ref) {
ref={ref}
ownerState={ownerState}
className={clsx(classes.root, className)}
color={color}
sx={[
...(!Object.keys(colorTransformations).includes(color) ? [{ color }] : []),
...(Array.isArray(sx) ? sx : [sx]),
]}
Comment on lines +140 to +143
Copy link
Member

@siriwatknp siriwatknp Mar 5, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This makes me think that there must be something wrong with the Typography code wise.

Copy link
Member

@siriwatknp siriwatknp Mar 5, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd say that we should look into this in v7.

{...other}
/>
);
Expand Down
59 changes: 59 additions & 0 deletions test/regressions/fixtures/TypographyColor/TypographyColor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
import * as React from 'react';
import { createTheme, ThemeProvider } from '@mui/material/styles';
import Typography from '@mui/material/Typography';

export default function TypographyColor() {
return (
<div>
<ThemeProvider
theme={createTheme({
components: {
MuiTypography: {
styleOverrides: {
root: ({ ownerState, theme }) => ({
...(ownerState.color === 'secondary.main' && {
color: theme.palette.error.main,
}),
}),
},
variants: [
{
props: { color: 'textPrimary' },
style: ({ theme }) => ({
color: theme.palette.warning.main,
}),
},
],
},
},
})}
>
<Typography>default</Typography>
<Typography color="primary">primary</Typography>
<Typography color="secondary">error (styleOverride)</Typography>
<Typography color="textPrimary">warning (variant)</Typography>
<Typography color="success">success</Typography>
<Typography color="success.light">success.light</Typography>
</ThemeProvider>
<ThemeProvider
theme={createTheme({
components: {
MuiTypography: {
styleOverrides: {
root: {
color: '#fbca04',
},
},
},
},
})}
>
<Typography>#fbca04</Typography>
<Typography color="#ff5252">#ff5252</Typography>
<Typography sx={{ color: '#ff5252' }}>#ff5252</Typography>
<Typography sx={(theme) => ({ color: theme.palette.secondary.main })}>secondary</Typography>
<Typography sx={{ color: (theme) => theme.palette.error.main }}>error</Typography>
</ThemeProvider>
</div>
);
}