it looks like the material-ui definition for the muiThemeable function may be incorrect...
when you write:
export default muiThemeable()(MainHeader);
it is essentially the same as writing:
export const themed = muiThemeable<MainHeader, {}, {}>()(MainHeader)
this won't compile because
the component property type and state were omitted
the compiler infers:
<TComponent<P, S>,{}, {}>
which does not align with the Function constraints
export function muiThemeable<TComponent extends (React.Component<P, S>), P, S>()
: (component: TComponent ) => TComponent;
...to satisfy the compiler, we need to add the missing constraints by doing:
export default (props: Properties) => muiThemeable<MainHeader, Properties, any>()(new MainHeader(props));
however, this provides an instance when a class is expected
if you proceed with...
// ...
import Themeable from "./themeable";
let props = { title: "hello!" };
ReactDOM.render(<Themeable {...props}/>, document.getElementById("main"));
it will not work
but if you modify the muiThemeable definition like so:
export function muiThemeable<TComponent extends (React.Component<P, S>), P, S>()
: (component: Function ) => TComponent;
then you can use:
export default muiThemeable<MainHeader, Properties, any>()( MainHeader);
although tsc will generate errors:
JSX element type 'Themeable' does not have any construct or call signatures
it will transpile correctly and function
however, this is not ideal because:
- it doesn't build
- Function is NOT describing the right parameter type
- TComponent does not describe what is returned
it seems like it returns an instance instead of a class or type
ultimately, considering the following signature may make more sense:
export function muiThemeable<TComponent extends (React.Component<P, S>), P, S>(): (component: new()=> TComponent ) => ( new() => TComponent);
after reviewing the source code at source,
export function muiThemeable<TComponent extends React.Component<P, S>, P extends MuiThemeProviderProps, S> (Component: new () => TComponent): React.StatelessComponent<P>
this could provide an alternative approach to redefine or enhance the definition.
By wrapping the function
...and potentially utilizing a decorator for efficiency and readability...
import * as React from "react";
import * as ReactDOM from "react-dom";
import * as injectTapEventPlugin from "react-tap-event-plugin";
// Needed for onTouchTap
// http://stackoverflow.com/a/34015469/988941
injectTapEventPlugin();
import darkBaseTheme from "material-ui/styles/baseThemes/darkBaseTheme";
import MuiThemeProvider from "material-ui/styles/MuiThemeProvider";
import getMuiTheme from "material-ui/styles/getMuiTheme";
import muiThemeable from "material-ui/styles/muiThemeable";
import AppBar from "material-ui/AppBar";
import MuiThemeProviderProps = __MaterialUI.Styles.MuiThemeProviderProps;
function Themeable<TComponent extends React.Component<P, any>, P extends MuiThemeProviderProps> (Component: new () => TComponent): new() => TComponent {
return muiThemeable<TComponent, P, any>()(Component as any) as any;
}
const themeable = <P, TFunction extends React.ComponentClass<P>>(target: TFunction): TFunction => {
return Themeable(target as any) as any;
};
export interface MyBarProps extends __MaterialUI.AppBarProps, __MaterialUI.Styles.MuiThemeProviderProps {
// ...
}
@themeable
export class MyBar extends React.Component<MyBarProps, any> {
constructor(props?: MyBarProps, context?: any) {
super(props, context);
}
render() {
if (!this.props.muiTheme) {
throw new Error("muiTheme not Found");
}
return (
<AppBar {...this.props} />
);
}
}
const darkTheme = getMuiTheme(darkBaseTheme);
darkTheme.appBar.color = "red";
const Main = () => (
<MuiThemeProvider muiTheme={darkTheme}>
<MyBar title="My AppBar" />
</MuiThemeProvider>
);
ReactDOM.render(<Main></Main>,document.getElementById("root"));