React Material-UIでフォントテーマを適用するにはどうすればよいですか？

Question

私はMaterial-UIの反応プロジェクトにGoogleフォントを適用しようとしていますが、それを取ることはできません。私は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

私はこれを考え出しました。

私は完全な生のテーマを使用してに切り替え、その後、このように部品実装：だっ

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

秒の事、私は大事だと思いません最初のうち2つのことを、やりました

//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, 
    } 
}; 

ほら、など世俗的とあなたが願う可能性としてバグを関心のない：より多くの可能性が犯人、次のように、'PT Sans'でスペースをエスケープしました。

Answer 2

material-uiテーマのフォントを変更する場合は、MuiThemeProviderプロバイダコンポーネントのmuiThemeを変更してください。ドキュメントはここに例があります：コンポーネントのほとんどが持っていた

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

注：http://www.material-ui.com/#/customization/themes

は次のようになります。彼らのフォントは更新されましたが、私は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を