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

小开

最佳答案

您可以通过以下操作更改 Materials-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 默认主题参数关于文档本身的改变 MuiTheme 他们是如下。主题材料接下来

关于 <Reboot />部分，您可以查看这里的文档重新启动详细信息

小开

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

很容易搞砸。例如，调色板是一个很大的对象... ... 排版也是，确保一切都在正确的地方。我做错了这件事，导致了一些随机的问题。

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

小开

这现在是首选的方法:

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/

小开

我不知道你在说什么

阿迪尔给出了公认的答案。

对于最新的 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;
}

小开

在 MUI v5中，你可以很容易地更新所有 Typography变体的 fontFamily或任何其他 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>
);

现场演示

小开

在 MUI v5中，还要确保 ThemeProvider 和 createTheme 是从 @mui/material/styles而不是从 @mui/styles导入的。我被困了好几个小时，一直在想为什么没用。

import { ThemeProvider, createTheme } from '@mui/styles'; ❌


import { ThemeProvider, createTheme } from '@mui/material/styles'; ✅


const theme = createTheme({
typography: {
allVariants: {
fontFamily: 'serif',
textTransform: 'none',
fontSize: 16,
},
},
});


function App() {
return (
<ThemeProvider theme={theme}>
...
</ThemeProvider>
);
}

小开

我觉得这样挺好

GlobalStyleOverrides.js

import { createTheme, responsiveFontSizes } from '@mui/material/styles';


export default function GlobalStyleOverrides() {
const theme = createTheme({
typography: {
fontFamily: [
'"Bebas Neue"',
'Roboto',
'"Helvetica Neue"',
'Arial',
'sans-serif',
].join(','),
body1: {
fontFamily: "'Poppins', Arial, sans-serif",
},
},
components: {
MuiButton: {
variants: [
{
props: { variant: 'contained' },
style: {
textTransform: 'none',
border: `10px dashed red`,
},
},
],
},
},
});


return responsiveFontSizes(theme);
}

App.js

import GlobalStyleOverrides from 'components/_base/global-style-overrides/GlobalStyleOverrides';
...
function App() {
return (
<ThemeProvider theme={GlobalStyleOverrides()}>
<Router>
...
</Router>
</ThemeProvider>
);
}