Typography and spacing in material-ui
<p>I defined raw theme for <code>material-ui</code> in <code>theme.ts</code>:</p>

<pre><code>import {Colors, Spacing} from 'material-ui/lib/styles/';
import {ColorManipulator} from 'material-ui/lib/utils/';
import {Styles} from 'material-ui';

export default &lt;Styles.RawTheme&gt; {
    spacing: Spacing,
    fontFamily: 'Roboto, sans-serif',
    palette: &lt;Styles.ThemePalette&gt; {
        primary1Color: Colors.red500,
        primary2Color: Colors.red700,
        primary3Color: Colors.lightBlack,
        accent1Color: Colors.orangeA200,
        accent2Color: Colors.grey100,
        accent3Color: Colors.grey500,
        textColor: Colors.darkBlack,
        alternateTextColor: Colors.white,
        canvasColor: Colors.white,
        borderColor: Colors.grey300,
        disabledColor: ColorManipulator.fade(Colors.darkBlack, 0.3),
        pickerHeaderColor: Colors.red500,
    }
};
</code></pre>

<p>Then in my custom React component <code>app.tsx</code> I applied this theme:</p>

<pre><code>import * as React from 'react';
import {AppBar, AppCanvas} from 'material-ui';
import {ThemeManager, ThemeDecorator} from 'material-ui/lib/styles/';
import Theme from 'theme';

@ThemeDecorator(ThemeManager.getMuiTheme(Theme))
export class App extends React.Component&lt;{}, {}&gt; {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            &lt;div&gt;
                &lt;AppBar title={ 'App' } showMenuIconButton={false}/&gt;
                &lt;AppCanvas&gt;
                    &lt;h1&gt;Test&lt;/h1&gt;
                &lt;/AppCanvas&gt;
            &lt;/div&gt;
        );
    }
}
</code></pre>

<p>But <code>h1</code> header is not styled as it has to be in Material design. No <code>Roboto</code> font, smaller size.</p>

<p>Does material-ui have built-in styles or something else that I can use to easily style headers according to Material guidelines and also give spacing (margins and padding) to elements?</p>