Skip to content

[material-ui] Make the palette always return new light and dark object#44059

Merged
mnajdova merged 1 commit intomui:masterfrom
siriwatknp:fix/create-palette
Oct 10, 2024
Merged

[material-ui] Make the palette always return new light and dark object#44059
mnajdova merged 1 commit intomui:masterfrom
siriwatknp:fix/create-palette

Conversation

@siriwatknp
Copy link
Member

@siriwatknp siriwatknp commented Oct 10, 2024

The issue popup in #43708 when there are multiple calls from createTheme.

The root cause comes from the palette.background is not being recreated every time that the createPalette is called,
so if palette.background.* is mutated, it affect all of the instances.

The fix is to wrap the light and dark object in a function and call them inside the createPalette. Tests added.


@siriwatknp siriwatknp added the type: enhancement It’s an improvement, but we can’t make up our mind whether it's a bug fix or a new feature. label Oct 10, 2024
@siriwatknp siriwatknp requested review from a team and Janpot October 10, 2024 08:03
@siriwatknp siriwatknp added customization: theme Higher level theming customizability. package: material-ui labels Oct 10, 2024
@mui-bot
Copy link

mui-bot commented Oct 10, 2024

Netlify deploy preview

https://deploy-preview-44059--material-ui.netlify.app/

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against 054401c

Copy link
Member

@Janpot Janpot left a comment

Choose a reason for hiding this comment

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

Look good 👍

expect(palette1.background.default).to.equal('#fff');
expect(palette2.background.default).to.equal('#fff');

palette1.background.default = '#000';
Copy link
Member

@oliviertassinari oliviertassinari Oct 11, 2024

Choose a reason for hiding this comment

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

Interesting, we had the same bug since Material UI v1, I guess.

Comment on lines -259 to +267
const modes = { dark, light };
const modes = { dark: getDark(), light: getLight() };
Copy link
Member

@oliviertassinari oliviertassinari Oct 11, 2024

Choose a reason for hiding this comment

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

We should refactor this then? It sounds wasteful to call getDark() or the other to then throw away the object: #44075.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

customization: theme Higher level theming customizability. type: enhancement It’s an improvement, but we can’t make up our mind whether it's a bug fix or a new feature.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants