import getMuiTheme from “material-ui/styles/getMuiTheme”; import MuiThemeProvider from “material-ui/styles/MuiThemeProvider”; import NotificationsIcon from 'material-ui/svg-icons/social/notifications';
class AppBarExampleComposition extends React.Component {
constructor(props) { super(props); this.state = { logged: true, }; } handleChange = (event, logged) => { this.setState({logged: logged}); }; render() { return ( <div> <h3>AppBar</h3> <mui.Toggle label="Logged" defaultToggled={true} onToggle={this.handleChange} labelPosition="right" style={{margin: 20}} /> <mui.AppBar title="Title" iconElementRight={this.state.logged ? <mui.FlatButton label="Logged" /> : <mui.FlatButton label="Login" />} /> <h3>Badge</h3> <div> <mui.Badge badgeContent={4} primary={true} > <NotificationsIcon /> </mui.Badge> <mui.Badge badgeContent={10} secondary={true} badgeStyle={{top: 12, right: 12}} > <mui.IconButton tooltip="Notifications"> <NotificationsIcon /> </mui.IconButton> </mui.Badge> </div> <h3>Date Picker</h3> <div> <mui.DatePicker hintText="Portrait Dialog" /> <mui.DatePicker hintText="Landscape Dialog" mode="landscape" /> <mui.DatePicker hintText="Dialog Disabled" disabled={true} /> </div> </div> ); }
}
export default class App extends React.Component {
render() { return ( <MuiThemeProvider muiTheme={getMuiTheme()}> // You can replace AppBarExampleComposition to your code <AppBarExampleComposition /> </MuiThemeProvider> ); }
}