-
-
Notifications
You must be signed in to change notification settings - Fork 31.7k
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
[docs] Add paragraph on withStyles with multiple classes #9851
Changes from 1 commit
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -94,6 +94,44 @@ const DecoratedNoProps = decorate<{}>( // <-- note the type argument! | |
|
||
To avoid worrying about this edge case it may be a good habit to always provide an explicit type argument to `decorate`. | ||
|
||
### Injecting Multiple Classes | ||
|
||
TypeScript does not support variadic types, therefore there is no clean way to type usage of `withStyles` that injects multiple classes into a component. There is a hacky workaround that allows you to get support for classes inside your component while only exposing the props you define. | ||
|
||
Take the following code as an example: We define our own props in the `Prop`-type, while the props the component actually receives is a union of our `Prop`-type and a `WithStyles`-type for each respective style we defined (`one` and `two`). To prevent TypeScript from exposing the props set through `withStyles` to the consumers of our component, we cast it to a `React.ComponentType<Props>` before exporting it. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. "Take the following code for example." There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Also, could you perhaps rephrase this without the personal pronoun "we"? |
||
|
||
```tsx | ||
import { Theme, withStyles, WithStyles } from "material-ui/styles"; | ||
import * as React from "react"; | ||
|
||
const style = (theme: Theme) => ({ | ||
one: { | ||
backgroundColor: "red", | ||
}, | ||
two: { | ||
backgroundColor: "pink", | ||
}, | ||
}); | ||
|
||
type Props = { | ||
someProp: string; | ||
}; | ||
|
||
type PropsWithStyles = Props & WithStyles<"one"> & WithStyles<"two">; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I was expecting: type PropsWithStyles = Props & WithStyles<'one' | 'two'>; There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Oh wow, this is an even better solution. Thanks for pointing this out. I played around a bit and looked at the types, but never thought about using a |
||
|
||
const MyComponent: React.SFC<PropsWithStyles> = ({ | ||
classes, | ||
...props | ||
}: PropsWithStyles) => ( | ||
<div> | ||
<div className={classes.one}>One</div> | ||
<div className={classes.two}>Two</div> | ||
</div> | ||
); | ||
|
||
export default withStyles(style)(MyComponent) as React.ComponentType<Props>; | ||
``` | ||
|
||
## Customization of `Theme` | ||
|
||
When adding custom properties to the `Theme`, you may continue to use it in a strongly typed way by exploiting | ||
|
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.
"However, there is a hacky workaround"