Книгопечатание и расстояние между ними в материал-щ

я определил сырец тема для material-ui в 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, 
    } 
};

Тогда в моем обычае Реагировать компонент app.tsx я применил эту тему:

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

Но h1 заголовок не является как это должно быть в материальном дизайне. No Roboto шрифт, меньший размер.

Имеет ли материал-ui встроенные стили или что-то еще, что я могу использовать, чтобы легко стилизовать заголовки в соответствии с рекомендациями по материалам, а также предоставить интервалы (поля и отступы) к элементам?

источник

2016-02-26 mixel

Я не знаю, как размер шрифта рассчитываются в окончательной теме, но если это зависит от содержания в интервале, то вы можете манипулировать, что при добавлении сеого к вашей сырой теме, как это:

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: {...} 
}

и играть с этими настройками.

источник

2016-03-02 20:47:48

Материал-Пользовательский интерфейс не включает шрифт Roboto, it is up to you to include it in your project.

Быстро проверить это, добавив следующее в <head> элемент вашего HTML и проверки, если ваш заголовок h1 стилизовано:

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

Если вы хотите скачать шрифт Roboto и включить его в ваших статических активов, вы можете получить его отсюда: https://www.fontsquirrel.com/fonts/roboto

источник

2016-12-19 05:26:00

Спасибо. Я поддержал. Я искал реализацию для стилей типографии из https://material.io/guidelines/style/typography.html#typography-styles. Я уже сделал некоторое обходное решение. Попробуем поделиться им позже. – mixel

Материал-ui 1.0 будет поставляться с Typography Компонент: usage и API.

Вы можете попробовать это прямо сейчас, установив [email protected]:

npm install [email protected] --save

источник

2017-11-16 09:38:15 mixel

Книгопечатание и расстояние между ними в материал-щ

ответ

Смежные вопросы