Question

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

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

Answer 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 3

如果您只想更改material-ui主题的字体，请更改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 4

我正在使用Material-UI版本3.9.2。我找到了解决方法。

import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles'
import Typography from '@material-ui/core/Typography'

const theme = createMuiTheme({
    palette: {
        primary: { main: '#228e22' },
        secondary: { main: '#4d4d4d' },
    },
    typography: {
        useNextVariants: true,
        fontFamily: '"Montserrat", Arial, Helvetica, sans-serif',
    },
})

const Base = () => (
   <MuiThemeProvider theme={theme}>
       <Typography component="h1" variant="h1">
           Hello
        </Typography>
    </MuiThemeProvider>
)

Answer 5

我使用下面的代码，结果成功。在自己的文件中编写JavaScript波纹管代码，然后在其CSS文件中编写@ font-face：

import './App.css';
import { createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';
import createPalette from '@material-ui/core/styles/createPalette';
import createTypography from '@material-ui/core/styles/createTypography';

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

function App() {
  return(
    <MuiThemeProvider theme={theme}>
    
    </MuiThemeProvider>
  );
}

@font-face{
  font-family: "IRANSansWeb";
  src: url('./fonts/iransans/ttf/IRANSansWeb.ttf') format('ttf'),
  url('./fonts/iransans/eot/IRANSansWeb.eot') format('eot'),
  url('./fonts/iransans/woff/IRANSansWeb.woff') format('woff'),
  url('./fonts/iransans/woff2/IRANSansWeb.woff2') format('woff2')
}

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

5 个答案: