更改所有material-ui（版本1）组件的字体系列

  • Z时代
  • 2024-01-10
  • 分类：问答

我们可以用更少的代码更改material-

ui组件的字体系列吗？我已经尝试了很多方法，但是仍然无法做到。我必须单独更改字体系列，这确实是很多工作。还有其他方法吗？

回答：

您可以执行以下操作在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 Default Theme Params赋予默认值。关于更改MuiTheme的文档本身，它们如下。主题素材UI

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

以上是 更改所有material-ui（版本1）组件的字体系列 的全部内容， 来源链接： utcz.com/qa/426407.html

回到顶部