@truefit/bach-material-ui

This library connects components composed with @truefit/bach to Material UI.

This library is based on the hooks found in Material UI 4 and above

Installation

npm install @truefit/bach-material-ui @truefit/bach @material-ui/core @material-ui/styles

or

yarn add @truefit/bach-material-ui @truefit/bach @material-ui/core @material-ui/styles

Enhancers

withStyles

Allows you to specify a set of styles with Material UI for the wrapped component.

Helper Signature

Parameter	Type	Description
createStyles	js object or function	a js object containing the style definition or a function that accepts the current theme and returns the style definition
options	js object (optional)	js object specifying Material UI options (see Material UI docs for details)
classesName	string (optional)	the name of the styles passed to the component in the props, defaults to "classes"

You can also specify a function as the value of an individual property and be passed the props object to then return the value (see fontSize in the example below).

Example

Typescript

importReactfrom'react';import{compose,withState,withCallback}from'@truefit/bach';import{withStyles}from'@truefit/bach-material-ui';import{Theme}from'@material-ui/core';typeProps={classes: {container: string;h1: string;h2: string;button: string;};fontSize: number;setFontSize: (n: number)=>void;increase: ()=>void;};constWithStyles=({classes, fontSize, increase}: Props)=>(<divclassName={classes.container}><h1className={classes.h1}>withStyles</h1><h2className={classes.h2}>FontSize: {fontSize}</h2><buttontype="button"className={classes.button}onClick={increase}>^Increase^</button></div>);exportdefaultcompose(withState('fontSize','setFontSize',12),withCallback<Props>('increase',({fontSize, setFontSize})=>()=>{setFontSize(fontSize+1);}),withStyles((theme: Theme)=>({container: {display: 'flex',alignItems: 'center',justifyContent: 'center',height: '100%',flexDirection: 'column',},h1: {color: theme.palette.primary.main,},h2: {color: theme.palette.secondary.main,fontSize: ({fontSize}: Props)=>fontSize,},button: {height: 50,width: 100,borderRadius: 8,},})),)(WithStyles);

Javascript

importReactfrom'react';import{compose,withState,withCallback}from'@truefit/bach';import{withStyles}from'@truefit/bach-material-ui';constWithStyles=({classes, fontSize, increase})=>(<divclassName={classes.container}><h1className={classes.h1}>withStyles</h1><h2className={classes.h2}>Font Size: {fontSize}</h2><buttonclassName={classes.button}onClick={increase}>
^ Increase ^
</button></div>);exportdefaultcompose(withState('fontSize','setFontSize',12),withCallback('increase',({fontSize, setFontSize})=>()=>{setFontSize(fontSize+1);}),withStyles((theme)=>({container: {display: 'flex',alignItems: 'center',justifyContent: 'center',height: '100%',flexDirection: 'column',},h1: {color: theme.palette.primary.main,},h2: {color: theme.palette.secondary.main,fontSize: ({fontSize})=>fontSize,},button: {height: 50,width: 100,borderRadius: 8,},})),)(WithStyles);

Material UI Hook

makeStyles

withTheme

Provides access to current theme.

Helper Signature

Parameter	Type	Description
themeName	string (optional)	the name of the theme passed to the component in the props, defaults to "theme"

Example

Typescript

importReactfrom'react';import{compose}from'@truefit/bach';import{withTheme}from'@truefit/bach-material-ui';import{Theme}from'@material-ui/core';typeProps={theme: Theme;};constExample=({theme}: Props)=>(<divstyle={{fontSize: theme.typography.fontSize}}>HelloWorld</div>);exportdefaultcompose(withTheme())(Example);

Javascript

importReactfrom'react';import{compose}from'@truefit/bach';import{withTheme}from'@truefit/bach-material-ui';constWithStyles=({theme})=>(<divstyle={{fontSize: theme.typography.fontSize}}>
Hello World
</div>);exportdefaultcompose(withTheme(),)(WithStyles);

Material UI Hook

useTheme