Haxe MaterialUI: withStyles

README.md

Using Styles.withStyles to style your components

Component without public props

private typedef Props = {
	var classes:TClasses;
}

private typedef TClasses = Classes<[
	root
]>;

@:noPublicProps()
@:wrap(Styles.withStyles(styles))
class MyComponent extends ReactComponentOfProps<Props> {
	public static function styles(theme:MuiTheme):ClassesDef<TClasses> {
		return Styles.jss({
			root: {
				// Css styles here
			}
		});
	}

	override public function render() {
		return jsx('
			<div className=${props.classes.root} />
		')
	}
}

Component with public props

private typedef Props = {
	> PublicProps,
	var classes:TClasses;
}

private typedef PublicProps = {
	// Public props here
}

private typedef TClasses = Classes<[
	root
]>;

@:publicProps(PublicProps)
@:wrap(Styles.withStyles(styles))
class MyComponent extends ReactComponentOfProps<Props> {
	public static function styles(theme:MuiTheme):ClassesDef<TClasses> {
		return Styles.jss({
			root: {
				// Css styles here
			}
		});
	}

	override public function render() {
		return jsx('
			<div className=${props.classes.root} />
		')
	}
}

Component with public props and HOC

import react.router.ReactRouter;
import react.router.Route.RouteRenderProps;

private typedef Props = {
	> PublicProps,
	> RouteRenderProps,
	var classes:TClasses;
}

private typedef PublicProps = {
	// Public props here
}

private typedef TClasses = Classes<[
	root
]>;

@:publicProps(PublicProps)
@:wrap(ReactRouter.withRouter)
@:wrap(Styles.withStyles(styles))
class MyComponent extends ReactComponentOfProps<Props> {
	public static function styles(theme:MuiTheme):ClassesDef<TClasses> {
		return Styles.jss({
			root: {
				// Css styles here
			}
		});
	}

	override public function render() {
		return jsx('
			<div className=${props.classes.root} />
		')
	}
}

Combine props with classNames

	override public function render() {
		var classes = classNames({
			'${props.classes.root}': true,
			'${props.classes.conditionalClass}': props.condition
		});

		return jsx('
			<div className=${classes}>
				${props.children}
			</div>
		');
	}

Another example:

		return Styles.jss({
			root: {
				position: Absolute, // Some properties have enumerations, see css-types lib
				top: 42, // will be converted to pixels if a number type is used
				marginLeft: theme.spacing.unit, // I think this API changed in recent versions of MUI, though
				"& > div": {
					// more css here, with enums, etc.
				},
				"@media print": {
					// media queries work too
				}
			}
		});

Also, note that Styles is mui.core.styles.Styles

@kLabz

how to export with withRouter?

from

export default withStyles(styles)(Topbar)

to

export default withRouter(withStyles(styles)(Topbar));

oh ,I got it

@:wrap(ReactRouter.withRouter)