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

发布时间：2020-12-15 05:06:08 所属栏目：百科来源：网络整理

导读：我正在尝试将谷歌字体应用于我的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' 我应用主题的组

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

}

其他答案似乎不适用于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,});

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

v1的排版文档在这里虽然我无法使示例工作：https://material-ui-1dab0.firebaseapp.com/customization/themes#typography

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!