Как применить тему шрифта в пользовательском интерфейсе React Material?

Question

Я пытаюсь применить шрифт google к моему проекту взаимодействия с материалом-UI, но, похоже, не может его принять. Я использую mui 0.14.2.

Мой index.html шрифт Загрузка: <link href='https://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'>

Мой компонент, где я применить тему:

import ThemeManager from 'material-ui/lib/styles/theme-manager'; 
import LightRawTheme from 'material-ui/lib/styles/raw-themes/light-raw-theme'; 

const App = React.createClass({ 

    childContextTypes: { 
     muiTheme: React.PropTypes.object, 
    }, 
    getChildContext: function() { 
     return { 
      muiTheme: ThemeManager.modifyRawThemeFontFamily(ThemeManager.getMuiTheme(LightRawTheme), 'PT Sans, sans-serif') 
     } 
    }, 

...etc etc 

} 

Answer 1

Я понял это. Я сделал 2 вещи, первое из которых я не думаю, что имею значения:

я перешел к использованию полного сырца темы, а затем реализующим в-компоненты, как это:

getChildContext: function() { 
     return { 
      muiTheme: ThemeManager.getMuiTheme(rawTheme) 
     } 
    }, 

Второй вещь, которая была более вероятно, преступник, убегали пространство в 'PT Sans' следующим образом:

//theme.js 
import Colors from 'material-ui/lib/styles/colors'; 
import ColorManipulator from 'material-ui/lib/utils/color-manipulator'; 
import Spacing from 'material-ui/lib/styles/spacing'; 
import zIndex from 'material-ui/lib/styles/zIndex'; 

export default { 
    spacing: Spacing, 
    zIndex: zIndex, 
    fontFamily: 'PT\ Sans', 
    palette: { 
     primary1Color: Colors.cyan500, 
     primary2Color: Colors.cyan700, 
     primary3Color: Colors.lightBlack, 
     accent1Color: Colors.pinkA200, 
     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.cyan500, 
    } 
}; 

Вуаля, а мирским и неинтересную ошибку, как вы могли бы надеяться.

Answer 2

Если вы только что искали, чтобы изменить шрифт своей темы-материала, измените muiTheme в компоненте поставщика MuiThemeProvider. Документах есть пример здесь: http://www.material-ui.com/#/customization/themes

должен выглядеть примерно так:

App.css

/* Load in your font */ 
@import url('https://fonts.googleapis.com/css?family=Lato'); 

App.js

// App.js 
import './App.css' 
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; 
import getMuiTheme from 'material-ui/styles/getMuiTheme'; 

const font = "'Lato', sans-serif"; 

const muiTheme = getMuiTheme({ 
    fontFamily: font 
}); 

function App(props) { 
    return(
    <MuiThemeProvider muiTheme={muiTheme}> 
     <div style={{fontFamily: font}}>...</div> 
    </MuiThemeProvider> 
); 
} 

Примечание большинство компонентов должны были иметь их шрифты обновлены, но я добавил fontFamily к прилагающему div (как показано выше), а также для того, чтобы все было обновлено (заголовки специально для меня).

Если вам интересно, что еще можно изменить, это, вероятно, проще всего просто посмотреть на код (https://github.com/callemall/material-ui/blob/master/src/styles/getMuiTheme.js), где она определена

Answer 3

другие ответы не похоже на работу для Материально-UI v1 , Вот что работает для меня:

import { createMuiTheme } from 'material-ui/styles'; 
import createPalette from 'material-ui/styles/palette'; 
import createTypography from 'material-ui/styles/typography'; 

const theme = createMuiTheme({ 
    typography: createTypography(createPalette(), { 
    fontFamily: '"Comic Sans"', 
    }) 
}); 

class App extends Component { 
    render() { 
    return (
     <MuiThemeProvider theme={theme}> 

Вот еще один пример для подмены шрифт, используя темную тему:

const theme = (() => { 
    const palette = createPalette({ 
    type: 'dark', 
    }); 

    const typography = createTypography(palette, { 
    fontFamily: '"Comic Sans"', 
    }); 

    return createMuiTheme({ 
    palette: palette, 
    typography: typography, 
    }); 
})(); 

документация типографика для v1 является здесь, хотя у меня были проблемы с получением пример работы: https://material-ui-1dab0.firebaseapp.com/customization/themes#typography