-
-
Notifications
You must be signed in to change notification settings - Fork 32.1k
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.
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
[blog] Introducing callback support in style overrides #30668
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks 🚀 Well done @siriwatknp
Co-authored-by: Olivier Tassinari <olivier.tassinari@gmail.com>
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Awesome! This minor is one of those that would benefit from a video with more hands-on demos, for noobies like me to understand better 😅 Great work. Left a few copywriting tweaks only.
Co-authored-by: danilo leal <67129314+danilo-leal@users.noreply.github.com>
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Awesome! 🤟
Co-authored-by: danilo leal <67129314+danilo-leal@users.noreply.github.com>
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nice
</Box>; | ||
``` | ||
|
||
> 💡 All MUI components are created with `styled` API, so they accept `sx` prop by default. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
> 💡 All MUI components are created with `styled` API, so they accept `sx` prop by default. | |
> 💡 All MUI components are created with the `styled` API, so they accept `sx` prop by default. |
|
||
> 💡 All MUI components are created with `styled` API, so they accept `sx` prop by default. | ||
|
||
`sx` helps developers write less code and be more productive once they are familiar with the API. With the callback support in `styleOverrides`, it is now possible to use `sx` like syntax at the global theme overrides. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
`sx` helps developers write less code and be more productive once they are familiar with the API. With the callback support in `styleOverrides`, it is now possible to use `sx` like syntax at the global theme overrides. | |
`sx` helps developers write less code and be more productive once they are familiar with the API. With the callback support in `styleOverrides`, it is now possible to use an `sx`-like syntax in global theme overrides. |
</ThemeProvider>; | ||
``` | ||
|
||
If you want to create a dynamic style based on props, you can return an array from the callback: |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Perhaps explain the example? Either: "In the following example" or with inline comments (or both). Also consider if other examples would benefit from further explanation.
Co-authored-by: Matt <github@nospam.33m.co>
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
All good from my end, looks really good!
v5.3
announcementThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
--- | ||
title: Introducing callback support in style overrides | ||
description: We're excited to introduce callback support for global theme overrides in this minor version update! | ||
date: 2022-01-20T00:00:00.000Z |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Are we good with the date? Do we want to use the release date of v5.3.0 or the blog post publish date?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yep, I will mark the next Monday as the blog post released date.
...(ownerState.variant === 'outlined' && { | ||
borderWidth: '2px', | ||
...(ownerState.variant === 'primary' && { | ||
borderColor: theme.palette.primary.light, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I don't think that there is any risk for circular references.
</ThemeProvider>; | ||
``` | ||
|
||
> 💡 The side benefit of using a callback is that you can use the runtime theme without creating the outer scoped variable. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think it is just a side benefit which is not the main purpose.
We have multiple threads where developers complain about this. But from what I remember, it was a step before. The main pain is for building the core set of design tokens, not so much for the customization of components.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👌
Co-authored-by: Olivier Tassinari <olivier.tassinari@gmail.com>
🔗 Preview site: https://deploy-preview-30668--material-ui.netlify.app/blog/callback-support-in-style-overrides/
This PR should be merged after #30121toggle ON the blog index page (@danilo-leal I forgot to do this in the previous PR 🥲)Once this PR is merged, will deploy the docs manually.