我想更改 Material ui 徽章中标签的字体大小。
我正在使用 style={{ fontSize: "15" }}
但这只会影响它的孩子,这是一个图标。
代码:
<Badge badgeContent={props.cartCount} color="secondary" style={{ fontSize: "15" }}>
<ShoppingCart className={classes.mediumIcon} />
</Badge>
答案 0 :(得分:2)
理想的方法是使用 documentation 中提到的类 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>
);
}
答案 1 :(得分:2)
您可以修改字体大小,如下所示。
在 useStyles
const useStyles = makeStyles((theme) => ({
font1: {
fontSize: "1rem"
},
)}
然后将其分配给Badge
组件
<Badge
classes={{
badge: classes.font1
}}
badgeContent={99}
{...defaultProps}
/>