更改所有 MUI 组件的字体系列

Question

我们可以用更少的代码更改 MUI 组件的字体系列吗？我尝试了很多方法，但仍然无法做到。我必须更改字体系列 单独这确实是很多工作。有没有其他方法可以做到这一点？

Answer 1

您可以通过以下方式更改 material-ui@next 库中的字体。假设在您的 <App /> 中定义如下

// Material UI
import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles';

const App = () => (
  <MuiThemeProvider theme={THEME}>
    <Provider store={store}>
      <Router history={appHistory} routes={Routes} />
    </Provider>
  </MuiThemeProvider>
 );

 ReactDOM.render(<App />, document.getElementById('app'));

在 MuiThemeProvider 的 theme 属性中，您提供以下位置

const THEME = createMuiTheme({
   typography: {
    "fontFamily": `"Roboto", "Helvetica", "Arial", sans-serif`,
    "fontSize": 14,
    "fontWeightLight": 300,
    "fontWeightRegular": 400,
    "fontWeightMedium": 500
   }
});

然后在您的css 或您的主要index.html 文件中的某处包含此@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700');

有关所有参数的列表，您可以提供给 createMuiTheme Default Theme Params 关于更改 MuiTheme 的文档本身，它们如下所示。 Themes Material UI Next

关于<Reboot /> 部分，您可以在此处查看文档Material UI Reboot Details

Answer 2

希望这可以帮助某人...在 createMuiTheme 中声明您的样式时，您需要非常小心逗号和括号

这真的很容易搞砸。例如，调色板是一个大对象……排版也是如此，确保一切都在正确的位置。我因为做错了而随机出现问题。

  palette: {
    primary: {
      light: '#ff8e8c',
      main: '#ff5a5f',
      dark: '#c62035',
      contrastText: '#fff',
    },
    secondary: {
      light: '#4da9b7',
      main: '#017a87',
      dark: '#004e5a',
      contrastText: '#000',
    },
  },
  typography: {
      fontFamily: "'Montserrat', sans-serif",
      textTransform: "none",


   button: {

    textTransform: "none",

  },

Answer 3

现在这是首选方法：

const theme = createMuiTheme({
  typography: {
    fontFamily: [
      '-apple-system',
      'BlinkMacSystemFont',
      '"Segoe UI"',
      'Roboto',
      '"Helvetica Neue"',
      'Arial',
      'sans-serif',
      '"Apple Color Emoji"',
      '"Segoe UI Emoji"',
      '"Segoe UI Symbol"',
    ].join(','),
  },
});

如此处所述： https://material-ui.com/customization/typography/

Answer 4

**** 更新 *****

添加到 Adeel 接受的答案。

对于最新的 Material-UI(v4+) 组件，导入以及 MuiThemeProvider 已更改。

所以现在在您的App.js 中执行以下操作：

import { createMuiTheme } from '@material-ui/core/styles';
import { ThemeProvider } from '@material-ui/styles';
import './Styles/App.css';

const theme = createMuiTheme({
  typography: {
    fontFamily: [
      'Nunito',
      'Roboto',
      '"Helvetica Neue"',
      'Arial',
      'sans-serif'
    ].join(','),
  }
});

class App extends Component {
  render() {
    return (
      <ThemeProvider theme={theme}>
        <div className="App">
          <MainApp />
        </div>
      </ThemeProvider>
    );
  }
}

export default App;

例如，现在我添加了 Nunito 字体。所以我必须通过以下方式将相同的内容添加到App.css（正在导入App.js）：

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Nunito Regular'), local('Nunito-Regular'), 
   url(https://fonts.gstatic.com/s/nunito/v11/XRXV3I6Li01BKofINeaBTMnFcQ.woff2) 
   format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, 
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, 
    U+2215, U+FEFF, U+FFFD;
}

Answer 5

在MUI v5中，您可以轻松更新fontFamily 或所有Typography 变体的任何其他CSS 属性：

const theme = createTheme({
  typography: {
    allVariants: {
      fontFamily: 'serif',
    },
  },
})

要在您的应用中动态更改fontFamily，您可以使用useMemo 根据最新的fontFamily 值创建一个新的theme 对象：

const defaultFontFamily = 'serif';
const [fontFamily, setFontFamily] = React.useState(defaultFontFamily);

const theme = React.useMemo(
  () =>
    createTheme({
      typography: {
        allVariants: { fontFamily },
      },
    }),
  [fontFamily],
);

return (
  <div>
    <Select
      defaultValue={defaultFontFamily}
      onChange={(e) => setFontFamily(e.target.value)}
    >
      <MenuItem value="serif">serif</MenuItem>
      <MenuItem value="sans-serif">sans-serif</MenuItem>
    </Select>
    <ThemeProvider theme={theme}>
      <Content />
    </ThemeProvider>
  </div>
);

现场演示