reactjs 更改所有 material-ui(version 1) 组件的字体系列
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48319372/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
changing font family of all material-ui(version 1) components
提问by anonymous_siva
Can we change the font family of material-ui components with less code. I have tried many ways but still, I can't able to do it. I have to change the font family individually which is really a lot of work. Are there any other ways to do that?
我们可以用更少的代码更改material-ui组件的字体系列吗？我尝试了很多方法，但仍然无法做到。我必须单独更改字体系列，这确实是很多工作。有没有其他方法可以做到这一点？
回答by Adeel Imran
You can change the font in material-ui@next library doing the following. Suppose in your <App />which is defined like the following
您可以执行以下操作更改 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'));
In the themeprop for MuiThemeProvideryou provide the following where
在theme道具中为MuiThemeProvider您提供以下内容
const THEME = createMuiTheme({
typography: {
"fontFamily": `"Roboto", "Helvetica", "Arial", sans-serif`,
"fontSize": 14,
"fontWeightLight": 300,
"fontWeightRegular": 400,
"fontWeightMedium": 500
}
});
Then somewhere in your cssor your main index.htmlfile include this @import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700');
然后在您css或您的主index.html文件中的某处包含此@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700');
For a list of all params you can give to createMuiThemeDefault Theme ParamsRegarding the docs itself for changing the MuiTheme they are as follows. Themes Material UI Next
对于所有参数的列表，您可以提供给createMuiTheme默认主题参数关于更改 MuiTheme 的文档本身，它们如下所示。主题材质 UI Next
Regarding the <Reboot />part you can have a look at the documentation here Material UI Reboot Details
关于该<Reboot />部分，您可以查看此处的文档Material UI Reboot Details
回答by Ankush Raghuvanshi
**** UPDATES*****
****更新*****
Adding to the accepted answer by Adeel.
添加到 Adeel 接受的答案。
For the latest Material-UI(v4+) components, the imports, as well as MuiThemeProvider, have been changed.
对于最新的 Material-UI(v4+) 组件，导入以及MuiThemeProvider已更改。
So now in your App.js, do the following:
因此，现在在您的 中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;
Now for example, I've added the Nunitofont. So I had to add the same to the App.css(which is being imported in App.js) in the following way:
例如，现在我添加了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;
}
回答by TechnoTim
This is now the preferred method:
这是现在的首选方法：
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(','),
},
});
As noted here: https://material-ui.com/customization/typography/
回答by Kyle Pennell
Hoping this can help someone...you need to be really careful with commas and brackets when declaring your styles within createMuiTheme
希望这可以帮助某人......在声明您的样式时，您需要非常小心逗号和括号 createMuiTheme
It's really easy to mess this up. For instance, palette is one big object...so is typography, make sure everything is in the right place. I had random problems caused by doing this wrong.
这真的很容易搞砸。例如，调色板是一个大对象......排版也是如此，确保一切都在正确的位置。由于做错了，我遇到了随机问题。
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",
},
