我希望能够更改Material UI徽章中标签的字体大小。
我使用了style={{ fontSize: "15" }}
,但这只影响了其子元素,也就是图标。
代码:
<Badge badgeContent={props.cartCount} color="secondary" style={{ fontSize: "15" }}>
<ShoppingCart className={classes.mediumIcon} />
</Badge>
我希望能够更改Material UI徽章中标签的字体大小。
我使用了style={{ fontSize: "15" }}
,但这只影响了其子元素,也就是图标。
代码:
<Badge badgeContent={props.cartCount} color="secondary" style={{ fontSize: "15" }}>
<ShoppingCart className={classes.mediumIcon} />
</Badge>
<Badge
badgeContent={9}
color="error"
overlap="circular"
sx={{ "& .MuiBadge-badge": { fontSize: 9, height: 15, minWidth: 15 } }}
>
<IconButton sx={{ p: 0, color: "primary.main" }}>
<Notifications />
</IconButton>
</Badge>
最理想的方式是按照文档中提到的使用类badge
。
import { Badge } from "@material-ui/core";
import { makeStyles } from "@material-ui/core/styles";
import "./styles.css";
const useStyles = makeStyles((theme) => ({
badge: {
fontSize: 30
}
}));
export default function App() {
const classes = useStyles();
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<Badge
badgeContent={"h"}
color="secondary"
classes={{ badge: classes.badge }}
/>
</div>
);
}
您可以按照以下方式修改字体大小。
在useStyles
中创建不同字体大小的样式。
const useStyles = makeStyles((theme) => ({
font1: {
fontSize: "1rem"
},
)}
然后将其分配给 Badge
组件如下:
<Badge
classes={{
badge: classes.font1
}}
badgeContent={99}
{...defaultProps}
/>
您可以按照以下方式使用componentProps属性(此示例更改徽章中文本的颜色,但相同原理也适用于fontSize)。
<Badge badgeContent={comments} componentsProps={{ root: {style: {color: 'white'}} }}>
<CommentIcon />
</Badge>