I've selected typescript/react/hapijs as my software stack of choice for my next set of projects, and I would prefer to work with Google's Material Design.
Fortunately Material-ui is available as an implementation of Google's Material Design built with Reactjs. It's developed and maintained by a private company - Call-Em-All - as an open source project.
So far it looks pretty good to me, and is the most advanced project of its kind. It is a substantial implementation offering the main services required for a website, but is an ongoing work, meaning somewhat incomplete. It's also not a typescript project, though there is a typescript definition file available, separately maintained, and one of the developers says the group is talking about automatically generating a typescript definition file for the project, to minimize deficiencies and regressions.
There's one shim that has to be added per the installation instructions (for now -- the devs say this will disappear in future), which is to install and integrate react-tap-event-plugin. Integrating the module required creation of a typescript def file react-tap-event-plugin.d.ts with the following content:
// react-tap-event-plugin.d.ts
// from https://gitlab.com/Thecavepeanut/material-react-ts/blob/master/ws-global-typings/react-tap-event-plugin/react-tap-event-plugin.d.ts
declare module 'react-tap-event-plugin' {
var exports: () => any;
export = exports;
}
Then the integration in the code involves
/// <reference path="../typings/react-tap-event-plugin.d.ts" />
import injectTapEventPlugin = require('react-tap-event-plugin');
injectTapEventPlugin();
To implement the AppBar example, I had to add definitions for
import NavigationClose = require('material-ui/lib/svg-icons/navigation/close');
import MoreVertIcon = require('material-ui/lib/svg-icons/navigation/more-vert')
to the material-ui.d.ts file, following the pattern in that def file established by the NavigationMenu definition. It turns out that most of the material-ui/lib/svg-icons/ icons don't have definitions.
Having discovered and implemented these fixes, however, I found that so far the library works well and looks good. What's encouraging here is that the dev team is using the project on their own corporate sight, and maintenance seems to be fairly active. There's also good uptake on the npm site (40k+ downloads in the last month).
I'm placing copies of the customized definitions files in a separate directory so that if they get clobbered with fresh tsd downloads they can be restored, or merged with the new. Not ideal, but will do for now.