Created
March 27, 2018 05:31
-
-
Save pbedat/26eb9376ac11041e1106cad5f1e7606f to your computer and use it in GitHub Desktop.
react-jss typescript
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| declare module 'react-jss' { | |
| import * as React from 'react'; | |
| export interface CSSProperties extends React.CSSProperties { | |
| composes?: string | string[] | |
| } | |
| export type StyleSheet<Props = {}> | |
| = Record< | |
| string, | |
| CSSProperties | |
| | ((props: Props) => React.CSSProperties) | |
| >; | |
| type StyleRules<ClassKey extends string = string, Props = {}> | |
| = Record<ClassKey, CSSProperties | |
| | ((props: Props) => React.CSSProperties)>; | |
| export type ClassNameMap<ClassKey extends string = string> = Record<ClassKey, string>; | |
| export interface WithStyles<ClassKey extends string = string> { | |
| classes: ClassNameMap<ClassKey> | |
| } | |
| export interface StyledComponentProps<ClassKey extends string = string> { | |
| classes?: Partial<ClassNameMap<ClassKey>> | |
| } | |
| function injectSheet<ClassKey extends string>( | |
| style: StyleRules<ClassKey>, | |
| options?: any, | |
| ): <P>( | |
| component: React.ComponentType<P & WithStyles<ClassKey>>, | |
| ) => React.ComponentType<P & StyledComponentProps<ClassKey>>; | |
| export default injectSheet; | |
| export const jss: any | |
| export const JssProvider: any | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const styles: StyleSheet<Props> = { // you don't have to type `styles` explicitly, but it helps you with code completion | |
| root: { | |
| color: "red", | |
| composes: ["btn", "btn-default"] | |
| }, | |
| header: ({important}) => ({ | |
| fontWeight: important ? 'bold' : 'normal' | |
| }), | |
| "&:hover": { | |
| color: "blue", | |
| "& a": { | |
| textDecoration: 'none' | |
| } as React.CSSProperties | |
| } | |
| } | |
| interface Props { | |
| important: boolean | |
| } | |
| const Comp = injectSheet(styles)<Props>(({ classes, important }) => ( | |
| <div className={classes.root}> | |
| <h1 className={classes.header}>Hello JSS</h1> | |
| </div> | |
| )) | |
| type StyledProps = WithStyles<keyof typeof styles> & Props; | |
| const ClassComp = injectSheet(styles)(class extends React.Component<StyledProps> { | |
| render() { | |
| const {classes} = this.props; | |
| return ( | |
| <div className={classes.root}> | |
| <h1 className={classes.header}>Hello JSS</h1> | |
| </div> | |
| ) | |
| } | |
| }) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Can confirm with Saturate, this one and the definitions in @types/react-jss do not support dynamic values.