Skip to content
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

Merged
merged 5 commits into from
Jan 13, 2018
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
38 changes: 38 additions & 0 deletions docs/src/pages/guides/typescript.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Copy link
Member

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"


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.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"Take the following code for example."

Copy link
Member

@mbrookes mbrookes Jan 12, 2018

Choose a reason for hiding this comment

The 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">;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was expecting:

type PropsWithStyles = Props & WithStyles<'one' | 'two'>;

Copy link
Contributor Author

Choose a reason for hiding this comment

The 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
Expand Down