import * as React from 'react' ; import AddIcon from 'material-ui-icons/Add' ; import Button from 'material-ui/Button' ; import { withStyles } from 'material-ui/styles' ; import TextField from 'material-ui/TextField' ; import Typography from 'material-ui/Typography' ; import { action , observable } from 'mobx' ; import { observer } from 'mobx-react' ; import { Titlebar } from '../shared/components' ; const styles = theme => ( { root : { height : '100%' , display : 'flex' , flexDirection : 'column' } , content : { padding : theme . spacing . unit } , demoTitle : { margin : '1.5em 0 0.5em 0' } , demoContainer : { backgroundColor : theme . palette . background . contentFrame , padding : theme . spacing . unit } , button : { margin : theme . spacing . unit } , input : { margin : theme . spacing . unit } } ) ; interface HomePageProps { classes : any ; } @ observer class HomePageBase extends React . Component < HomePageProps , { } > { @ observable name = '' ; @ action onChange = ( event ) => { this . name = event . target . value ; } ; render ( ) { const { classes } = this . props ; return ( < div className = { classes . root } > < Titlebar > React MobX MUI TypeScript Seed < /Titlebar> < div className = { classes . content } > < Typography type = "title" className = { classes . demoTitle } > Buttons < /Typography> < div className = { classes . demoContainer } > < Button raised = { true } className = { classes . button } > Default < /Button> < Button raised = { true } color = "primary" className = { classes . button } > Primary < /Button> < Button raised = { true } color = "accent" className = { classes . button } > Accent < /Button> < Button raised = { true } color = "contrast" className = { classes . button } > Contrast < /Button> < Button raised = { true } color = "accent" disabled = { true } className = { classes . button } > Disabled < /Button> < Button fab = { true } color = "primary" className = { classes . button } > < AddIcon /> < /Button> < /div> < Typography type = "title" className = { classes . demoTitle } > Text Field Using MobX < /Typography> < div className = { classes . demoContainer } > < TextField id = "name" label = "Name" className = { classes . input } value = { this . name } onChange = { this . onChange } / > < /div> < Typography type = "body2" > { this . name } < /Typography> < /div> < /div>); } } export const HomePage = withStyles ( styles ) ( HomePageBase ) ;