-
-
Notifications
You must be signed in to change notification settings - Fork 32.4k
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
[Typography] Add ability to specify custom variants #20203
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.
@lesha1201 Thanks for your interest in this effort, however, this should require a global change in the infrastructure, not a one-off case.
Details of bundle changes.Comparing: f008465...4b734a0 Details of page changes
|
@@ -28,6 +28,7 @@ export default function createTypography(palette, typography) { | |||
// Apply the CSS properties to all the variants. | |||
allVariants, | |||
pxToRem: pxToRem2, | |||
customVariants = {}, |
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.
Spreading should already achieve the same.
customVariants = {}, |
@@ -15,7 +15,8 @@ export type Variant = | |||
| 'body2' | |||
| 'caption' | |||
| 'button' | |||
| 'overline'; | |||
| 'overline' | |||
| keyof CustomVariants; |
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.
We will prefer module augmentation.
| keyof CustomVariants; |
'srOnly', | ||
'inherit', | ||
]), | ||
variant: PropTypes.string, |
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.
To keep enough information in the generated API documentation.
variant: PropTypes.string, | |
variant: variant: PropTypes.oneOf(PropTypes.string, PropTypes.oneOf([…])), |
@@ -5,6 +5,8 @@ import withStyles from '../styles/withStyles'; | |||
import capitalize from '../utils/capitalize'; | |||
|
|||
export const styles = theme => ({ | |||
/* Styles applied to the root element if `variant` is from user defined variants (customVariants). */ | |||
...theme.typography.customVariants, |
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.
...theme.typography.customVariants, |
What is the issue that caused this to be closed -- Is there any remaining task, that will allow it to be merged? |
Any update on merging this functionality? |
Would really love to have this feature.. |
Implemented in #22006 which is only available in v5. Documentation can be found in https://next--material-ui.netlify.app/customization/components/#adding-new-component-variants. |
Also see #22257 for the future solution that will bypass the need to define custom styles. |
I appreciate the link but lets not confuse users even more. The issue is still open and we can't know if this will make it into any release. |
Right, agree: #22257 (comment) should clear the confusion. We have a workaround in v5-alpha.8 and will have a solution for this before v5 beta. |
Related issues: #15573
Description
It adds ability to specify custom variants for
<Typography />
via theming. I'm not sure about such an implementation so feel free to close PR. It can be like a temporary solution before v5.Example: