Skip to content

[docs] Add theme.applyStyles() documentation with a codemod#40963

Closed
siriwatknp wants to merge 1 commit intomui:masterfrom
siriwatknp:docs/theme-apply-styles
Closed

[docs] Add theme.applyStyles() documentation with a codemod#40963
siriwatknp wants to merge 1 commit intomui:masterfrom
siriwatknp:docs/theme-apply-styles

Conversation

@siriwatknp
Copy link
Member

@siriwatknp siriwatknp commented Feb 6, 2024

TODO

  • Doc
  • Codemod

@siriwatknp siriwatknp added docs Improvements or additions to the documentation. package: codemod Specific to codemod. labels Feb 6, 2024
@mui-bot
Copy link

mui-bot commented Feb 6, 2024

Comment on lines +163 to +176
const MyComponent = styled('div')(
({ theme }) => ({
color: '#fff',
backgroundColor: theme.palette.primary.main,
'&:hover': {
boxShadow: theme.shadows[3],
backgroundColor: theme.palette.primary.dark,
},
}),
({ theme }) =>
theme.applyStyles('dark', {
backgroundColor: theme.palette.secondary.main,
}),
);
Copy link
Member

Choose a reason for hiding this comment

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

Suggested change
const MyComponent = styled('div')(
({ theme }) => ({
color: '#fff',
backgroundColor: theme.palette.primary.main,
'&:hover': {
boxShadow: theme.shadows[3],
backgroundColor: theme.palette.primary.dark,
},
}),
({ theme }) =>
theme.applyStyles('dark', {
backgroundColor: theme.palette.secondary.main,
}),
);
const MyComponent = styled('div')(
({ theme }) => ({
// default background color for light mode
backgroundColor: theme.palette.primary.main,
...theme.applyStyles('dark', {
// background color in dark mode
backgroundColor: theme.palette.secondary.main,
}),
);

Maybe simplify and explain with comments?


### Codemod

We provide a codemod to migrate your codebase from using `theme.palette.mode` to use `theme.applyStyles()`.
Copy link
Member

Choose a reason for hiding this comment

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

Suggested change
We provide a codemod to migrate your codebase from using `theme.palette.mode` to use `theme.applyStyles()`.
You can use a codemod to migrate your codebase from using `theme.palette.mode` to use `theme.applyStyles()`.

@siriwatknp
Copy link
Member Author

closed in favor of #42498

@siriwatknp siriwatknp closed this Jun 4, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

docs Improvements or additions to the documentation. package: codemod Specific to codemod.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants