EDIT: Updated Answer (v0.22.0)
For setting up the CSS you can still use the plain css:
<link rel="stylesheet" href="LINK_TO/material-components-web.css">
But I would recommend using scss, this way you can override different values like theme colors and customize everything the way you want. Example:
$mdc-theme-primary: #404040;
$mdc-theme-accent: #a349a3;
$mdc-theme-background: #fff;
@import "@material/ripple/mdc-ripple";
@import "@material/typography/mdc-typography";
@import "@material/theme/mdc-theme";
@import "@material/button/mdc-button";
For using components that need logic in terms of javascript I usually write react.js wrapper for this component. Here is an example for an accept/decline dialog component:
import React from 'react';
import { MDCDialog } from '@material/dialog/dist/mdc.dialog';
class AcceptDialog extends React.Component {
constructor(props) {
super(props);
this.passThroughInfo;
}
componentDidMount() {
this.dialog = new MDCDialog(this.refs.dialog);
// provide control to parent component to open the dialog from there
this.props.provideCtrl({
show: (passThroughInfo) => {
this.passThroughInfo = passThroughInfo;
this.dialog.show();
},
close: () => {
this.passThroughInfo = undefined;
this.dialog.close();
}
});
this.dialog.listen('MDCDialog:accept', () => {
this.props.acceptCb(this.passThroughInfo);
})
this.dialog.listen('MDCDialog:cancel', () => {
this.props.declineCb(this.passThroughInfo);
})
}
componentWillUnmount() {
this.props.provideCtrl(null);
}
defaultProps = {
className: "",
id: "",
header: "",
text: "",
acceptCb: function () { },
declineCb: function () { }
}
render() {
let className = "mdc-dialog accept_dialog" + this.props.className;
return (
<aside className={className} role="alertdialog" ref="dialog" id={this.props.id}>
<div className="mdc-dialog__surface">
{this.props.header !== "" &&
<header className="mdc-dialog__header">
<h2 className="mdc-dialog__header__title">
{this.props.header}
</h2>
</header>
}
<section className="mdc-dialog__body">
{this.props.section}
</section>
<footer className="mdc-dialog__footer">
<button type="button" className="mdc-button mdc-dialog__footer__button mdc-dialog__footer__button--cancel">Decline</button>
<button type="button" className="mdc-button mdc-dialog__footer__button mdc-dialog__footer__button--accept">Accept</button>
</footer>
</div>
<div className="mdc-dialog__backdrop"></div>
</aside>
);
}
}
export default AcceptDialog
Then use like this in other components:
// How to open the accept dialog
this.accept_dialog.show(data);
// The callback called on accept
callback(data){...}
<AcceptDialog
acceptCb={this.callback}
provideCtrl={ctrl => this.accept_dialog = ctrl}>
</AcceptDialog>
____________OLD ANSWER_______________
1) Adding CSS
That is reather easy. You can just add it to your index.html file:
<link rel="stylesheet" href="LINK_TO/material-components-web.css">
If you are using SASS you can also access the sass files (you have to install the @material npm module: npm install --save @material). Then you need node-sass and include the path to the @material folder in your webpack config. I have not tried this out but in theory, that should work.
2) Adding Javascript
Again you have more possibilities. Here is what I have done. You can import mdc like this
class Foo extends Component(){
componentDidMount(){
// either this like that
mdc.textfield.MDCTextfield.attachTo(this.refs.textfield);
// or like that
const MDCTextfield = mdc.textfield.MDCTextfield;
const textfield = new MDCTextfield(this.refs.textfield);
}
render() {
return(
<form className="form-group" onSubmit={this.submitForm}>
<div className="mdc-textfield" ref="textfield">
<input type="text" id="my-textfield" className="mdc-textfield__input"/>
<label className="mdc-textfield__label" htmlFor="my-textfield">Hint text</label>
</div>
</form>
);
}
}
now you can either create a Component (Wrapper) for an Input field. If you don't want to do that you can also auto init all of your components by adding:
// app.component.js
import * as mdc from 'material-components-web/dist/material-components-web';
class App extends React.Component {
componentDidMount(){
mdc.autoInit();
}
render(){
return(
<div className="my-app">
{this.props.children}
</div>
);
}
}
and add this to your textfields:
<div className="mdc-textfield" data-mdc-auto-init="MDCTextfield">
Now the other possibility is to import like this:
import {MDCCheckbox} from '@material/checkbox';
Here you need to tell the bable-loader in your webpack config file to also include the node_modules/@material folder. Everything else stays basically the same.
