Typografie und Abstand in material-ui

Definierte ich raw-theme für material-ui im 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,
    }
};

Dann in meinem custom Reagieren Komponente app.tsx ich bewarb mich dieses Thema:

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>
        );
    }
}

Aber h1 header ist nicht gestylt, wie es im Material-design. Keine Roboto schriftart, - kleinere Größe.

Tut, material-ui haben, built-in styles oder etwas anderes, das ich verwenden kann, um einfach Stil Header entsprechend auf die Materialangaben und geben auch die Abstände (margins und padding) auf die Elemente?

InformationsquelleAutor mixel | 2016-02-26
  1. 2

    Material-UI nicht enthalten ist die Roboto-schriftart, es ist bis zu Ihnen, in Ihr Projekt einbinden.

    Schnell überprüfen Sie dies, indem Sie den folgenden in der <head> element Ihres HTML-Codes und überprüfen, ob Ihre h1 header-Stil:

    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">

    Wenn Sie möchten, laden Sie die Roboto-schriftart und fügen Sie es in Ihrem statischen Elemente, können Sie es von hier: https://www.fontsquirrel.com/fonts/roboto

    InformationsquelleAutor Daniel Bank
  2. 2

    UPDATE:

    material-ui, jetzt hat Typografie Komponente:

    <Typography variant="h1" component="h2">
  h1. Heading
</Typography>

    Außerdem gibt es Möglichkeiten für Typografie Anpassungen und utilities zu kontrollieren, Ausrichtung, Textumbruch, Gewicht und vieles mehr.

    ALTE ANTWORT:

    material-ui-1.0 wird mit Typography Komponente: Nutzung und API.

    Können Sie versuchen es jetzt durch die Installation material-ui@next:

    npm install material-ui@next --save
    InformationsquelleAutor mixel
  3. 0

    Ich bin mir nicht sicher, wie die Schriftgröße errechnet sich in das Letzte Thema, wenn es aber eine Funktion, die Inhalte in Abstand, dann kann man manipulieren, indem man einen Abstand Abschnitt, um Ihre raw-Thema wie diesem:

    export default <Styles.RawTheme> {
    fontFamily: 'Roboto, sans-serif',
    spacing: {
      iconSize: 24,
      desktopGutter: 24,
      desktopGutterMore: 32,
      desktopGutterLess: 16,
      desktopGutterMini: 8,
      desktopKeylineIncrement: 60,  //left-nav width = this * 4
      desktopDropDownMenuItemHeight: 32,
      desktopDropDownMenuFontSize: 15,
      desktopLeftNavMenuItemHeight: 30,
      desktopSubheaderHeight: 48,
      desktopToolbarHeight: 56
    },
    palette: {...}
}

    und spielen mit diesen Einstellungen.

    InformationsquelleAutor Larry Maccherone
Schreibe einen Kommentar