Menu
I defined raw theme for material-ui in theme.ts:
import {Colors, Spacing} from 'material-ui/lib/styles/';
import {ColorManipulator} from 'material-ui/lib/utils/';
import {Styles} from 'material-ui';
export default <Styles.RawTheme> {
spacing: Spacing,
fontFamily: 'Roboto, sans-serif',
palette: <Styles.ThemePalette> {
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,
}
};
Then in my custom React component app.tsx I applied this theme:
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<{}, {}> {
constructor(props) {
super(props);
}
render() {
return (
<div>
<AppBar title={ 'App' } showMenuIconButton={false}/>
<AppCanvas>
<h1>Test</h1>
</AppCanvas>
</div>
);
}
}
But h1 header is not styled as it has to be in Material design. No Roboto font, smaller size.
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?
657
Use the theme. spacing() helper to create consistent spacing between the elements of your UI. MUI uses a recommended 8px scaling factor by default.
Typography is a Material-UI component used to standardize the text and its related CSS properties without worrying about browser compatibility issues.
Material-UI does not include the Roboto font, it is up to you to include it in your project.
Quickly verify this by adding the following in the <head> element of your HTML and checking if your h1 header is styled:
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
If you want to download the Roboto font and include it in your static assets, you can get it from here: https://www.fontsquirrel.com/fonts/roboto
200
UPDATE:
material-ui now has Typography component:
<Typography variant="h1" component="h2">
h1. Heading
</Typography>
Also there are possibilities for typography customizations and utilities to control alignment, wrapping, weight, and more.
OLD ANSWER:
material-ui 1.0 will come with Typography component: usage and API.
You can try it right now by installing material-ui@next:
npm install material-ui@next --save
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With