[docs][material-ui] Improve theme.applyStyles() docs
#44658
Merged
+118
−60
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
DiegoAndai
added
docs
DiegoAndai
force-pushed
the
improve-applystyles-docs
branch
from
6a340d7 to
c68a51b
Compare
DiegoAndai
commented
Dec 5, 2024
| * ``` | ||
| * | ||
| * @example | ||
| * 2. using with `sx` prop: | ||
| * ```jsx | ||
| * <Box sx={theme => [ |
There was a problem hiding this comment.
This doesn't work, sx prop doesn't accept (theme) => array as styled does.
DiegoAndai
force-pushed
the
improve-applystyles-docs
branch
from
bb63799 to
557a511
Compare
DiegoAndai
changed the title
theme.applyStyles() docs
siriwatknp
reviewed
Dec 6, 2024
siriwatknp
reviewed
Dec 6, 2024
siriwatknp
reviewed
Dec 6, 2024
siriwatknp
reviewed
Dec 6, 2024
DiegoAndai
commented
Dec 20, 2024
| @@ -229,18 +229,29 @@ import Button from '@mui/material/Button'; | |||
| </Button>; | |||
| ``` | |||
|
|
|||
| ### Codemod | |||
There was a problem hiding this comment.
This section wasn't removed, it was just moved below
samuelsycamore
approved these changes
Dec 20, 2024
Co-authored-by: Sycamore <71297412+samuelsycamore@users.noreply.github.com> Signed-off-by: Diego Andai <diego@mui.com>
|
We discussed @siriwatknp's review directly, and I applied the agreed changes. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Closes #44488
Preview for changed pages is here: #44658 (comment)
Add docs to address the four concerns raised in #44488:
Sx and Styled can't override styles that use
theme.applyStylesdue to specificity-> Add specificity warning and example
theme.applyStylesdoesn't support template literal syntax so the css selector has to either be extracted to a var or hardcoded-> Add section explaining how to override
theme.applyStylesto cover this and any other custom caseDocs are inconsistent on recommendations. Docs say to use spread syntax on
theme.applyStyles, then the actual code files say to not use spread syntax. ie. Docs, Code-> Use same convention in docs as in code source
applyStyles isn't a valid replacement for controlling the theme of specific components. If you only specify dark theme styles with applyStyles, then adding
.mode-lightto a component won't apply those styles since.mode-darkhas higher specificity. Refer to link for example-> Can be covered following the override
theme.applyStylessection