-
-
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
[styles] Warn when using a missing style rule #16501
[styles] Warn when using a missing style rule #16501
Conversation
@@ -178,7 +178,7 @@ function MarkdownDocs(props) { | |||
</Portal> | |||
)} | |||
|
|||
<AppContent disableToc={disableToc} className={classes.root}> | |||
<AppContent disableToc={disableToc}> |
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.
A dead class name found with the new warning.
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.
If you're concerned with using missing classes then using types is the better approach.
@@ -221,7 +222,7 @@ Typography.propTypes = { | |||
/** | |||
* Applies the theme typography styles. | |||
*/ | |||
variant: PropTypes.oneOf([ | |||
variant: oneOfWithString([ |
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.
How does react-docgen handle PropTypes.oneOfType([PropTypes.string, PropTypes.oneOf([...]])
Without For custom variants we have to defer checking to the style handler anyway. Not sure why we need a Proxy for that. |
Yeah, I'm not very happy with this approach. Another one I can think of. We could have a style method that internalize the warning logic: diff --git a/packages/material-ui/src/Typography/Typography.js b/packages/material-ui/src/Typography/Typography.js
index 132001221..b75fe1486 100644
--- a/packages/material-ui/src/Typography/Typography.js
+++ b/packages/material-ui/src/Typography/Typography.js
@@ -146,9 +146,13 @@ const Typography = React.forwardRef(function Typography(props, ref) {
<Component
className={clsx(
classes.root,
+ style({
+ classes,
+ key: `color${capitalize(color)}`,
+ enable: color !== 'initial',
+ }),
{
[classes[variant]]: variant !== 'inherit',
- [classes[`color${capitalize(color)}`]]: color !== 'initial',
[classes.noWrap]: noWrap,
[classes.gutterBottom]: gutterBottom,
[classes.paragraph]: paragraph, |
I will resume the effort later on. |
I'm exploring one possible approach to better handle #13875, #15454, #15573.
The idea here is to soften the
PropTypes.oneOf
prop type toPropTypes.string
while keeping the warning for dynamic values with aclasses
proxy that detects accesses to none supported values.However, I have found two drawbacks with this approach:
classes
return a rich object, it's less obvious that it's a simple object behind the proxy: