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

Question

我正在尝试将 google 字体应用于我的 Material-UI React 项目，但似乎无法使用它。我正在使用 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)
        }
    },

第二件事，更可能是罪魁祸首，是转义'PT Sans'中的space，如下：

//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

如果您只是想更改 material-ui 主题的字体，请更改 MuiThemeProvider 提供程序组件中的 muiTheme。文档在这里有一个例子：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（如上所示），以便所有组件都更新（headers 专门为我）。

如果您想知道还可以重写什么，最简单的方法可能是查看定义它的代码 (https://github.com/callemall/material-ui/blob/master/src/styles/getMuiTheme.js)

Answer 3

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

Answer 6

更新后 Material UI 到：

"@mui/icons-material": "^5.0.4",
"@mui/lab": "^5.0.0-alpha.51",
"@mui/material": "^5.0.4",
"@mui/styles": "^5.0.1",

在你的theme.js

import { createTheme } from "@mui/material/styles";

// Create a theme instance.
const theme = createTheme({
  typography: {
    fontFamily: '"Merienda", cursive',
  },
  palette: {
    primary: {
       main: "rgb(68, 139, 68)",
    },
    secondary: {
      main: "rgb(141, 202, 141)",
      // contrastText: "#fff",
    },
    spacing: 24,
  },
});


export default theme;

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

How do I apply a Font Theme in React Material-UI?

reactjs

material-ui