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>
' );
}
@kLabz
how to export with withRouter?
from
to
oh ,I got it
@:wrap(ReactRouter.withRouter)