在Material-UI(MUI)中全局更改fontWeight
可以通过多种方式实现,主要取决于你希望更改的是组件默认样式还是主题级别的样式。以下是几种常见的方法:
makeStyles
或withStyles
你可以创建一个样式并应用到根组件上,这样所有的子组件都会继承这个样式。
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
const useStyles = makeStyles({
root: {
fontWeight: 'bold', // 设置全局的fontWeight
},
});
function App() {
const classes = useStyles();
return (
<div className={classes.root}>
<Button variant="contained">Bold Text Button</Button>
<Button variant="outlined">Bold Text Outline Button</Button>
</div>
);
}
export default App;
通过修改MUI的主题,你可以全局地更改所有组件的fontWeight
。
import React from 'react';
import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
const theme = createMuiTheme({
typography: {
fontWeightBold: 700, // 设置全局的fontWeight
},
});
function App() {
return (
<ThemeProvider theme={theme}>
<Button variant="contained">Bold Text Button</Button>
<Button variant="outlined">Bold Text Outline Button</Button>
</ThemeProvider>
);
}
export default App;
你也可以通过全局CSS来更改fontWeight
。
/* 在全局CSS文件中 */
body {
font-weight: bold;
}
然后在你的React组件中引入这个CSS文件。
import React from 'react';
import './global.css'; // 引入全局CSS文件
import Button from '@material-ui/core/Button';
function App() {
return (
<div>
<Button variant="contained">Bold Text Button</Button>
<Button variant="outlined">Bold Text Outline Button</Button>
</div>
);
}
export default App;
fontWeight
,使用makeStyles
或withStyles
会更加灵活。如果你发现全局更改fontWeight
没有生效,可能是以下原因:
!important
来解决。通过以上方法,你应该能够在Material-UI/React中全局更改fontWeight
。
领取专属 10元无门槛券
手把手带您无忧上云