Last active
August 4, 2016 18:09
-
-
Save roblingle/0b2e68f31364d820a9fb9dcb0e2418a4 to your computer and use it in GitHub Desktop.
MuiThemeWrapper
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
* MuiThemeWrapper.js | |
* | |
* Simplifies Material-UI React components when you don't have a single top-level component, | |
* which is common in Rails and Meteor where you're including components in pages as needed. | |
* | |
*/ | |
import React, { Component } from 'react'; | |
import {deepOrange500} from 'material-ui/styles/colors'; | |
import getMuiTheme from 'material-ui/styles/getMuiTheme'; | |
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; | |
const muiTheme = getMuiTheme({ | |
palette: { | |
accent1Color: deepOrange500 | |
}, | |
}); | |
// See https://gist.github.com/sebmarkbage/ef0bf1f338a7182b6775 | |
export var MuiThemeWrapper = ComposedComponent => class extends Component { | |
// componentDidMount(){ | |
// console.log('Mounted and enhanced!'); | |
// } | |
render(){ | |
return ( | |
<MuiThemeProvider muiTheme={muiTheme}> | |
<ComposedComponent {...this.props} /> | |
</MuiThemeProvider> | |
); | |
} | |
} |
import React from 'react';
import { Table, TableRow, TableRowColumn } from 'material-ui/Table';
class componentName extends React.Component {
render () {
return (
<Table selectable={true}>
{ this.props.data.map( (row, index) => {
<TableRow key={index} selected={row.selected}>
<TableRowColumn>{index}</TableRowColumn>
<TableRowColumn>{row.name}</TableRowColumn>
</TableRow>
}
)}
</Table>
)
}
}
Table.propTypes = {
data: React.PropTypes.arrayOf(React.PropTypes.object).isRequired
}
export default MuiWrapper(componentName);
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
For non-Rails applications, like Meteor, import MuiThemeWrapper as above into each top-level component and export as