import * as React from "react"; import injectSheet, { JssProvider, SheetsRegistry, Styles, WithSheet, ThemeProvider } from "react-jss"; interface MyTheme { color: { primary: string; secondary: string; }; } /** * helper function to counter typescripts type widening */ // tslint:disable-next-line:no-unnecessary-generics function createStyles(styles: Styles): Styles { return styles as Styles; } interface ButtonProps { label: string; active?: boolean; } const styles = (theme: MyTheme) => createStyles({ myButton: { color: (props: ButtonProps) => props.active ? 'red' : theme.color.primary, margin: 1, "& span": { fontWeight: "revert" } }, myLabel: { fontStyle: "italic" } }); const Button: React.SFC> = ({active, classes, children}) => { return ( <> ); }; const ManuallyStyles = () => { return (