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

Question

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

原文由 anonymous_siva 发布，翻译遵循 CC BY-SA 4.0 许可协议

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'));

在 theme 支持 MuiThemeProvider 您提供以下内容

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 默认主题参数 关于更改 MuiTheme 的文档本身，它们如下所示。 主题材质 UI 下一个

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

原文由 Adeel Imran 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

\*\*\** 更新\*\*\***

添加到 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;
}

原文由 Ankush Raghuvanshi 发布，翻译遵循 CC BY-SA 4.0 许可协议