如何在React Material-UI中应用字体主题？

Question

我正在尝试将谷歌字体应用于我的Material-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

如果你只是希望改变你的材料的UI主题的字体，改变muiTheme在MuiThemeProvider供应商的组件。文档在这里有一个例子：http : //www.material-ui.com/#/customization/themes

应该是这样的：

应用程序.css

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

应用程序.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 2

其他答案似乎不适用于Material-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