如何在reactjs中更改材质ui徽章内容的字体大小？

IT技术 reactjs material-ui
2021-05-09 17:07:24

我想更改材料 ui 徽章中标签的字体大小。我正在使用，style={{ fontSize: "15" }}但这只会影响它的孩子，这是一个图标。

代码：

<Badge badgeContent={props.cartCount} color="secondary" style={{ fontSize: "15" }}>
    <ShoppingCart className={classes.mediumIcon} />
</Badge>
3个回答

理想的方法是使用文档中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}
      />

沙盒

如果您使用 mui 系统，那么这可以更改徽章字体大小

    <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>
其它你可能感兴趣的问题
上一篇React-router v4，URL 更改但组件不呈现 下一篇如何在react中在 <canvas> 上设置“onKeyPress”处理程序？