如何在ReactJS中更改Material UI标记内容的字体大小？

Question

我希望能够更改Material UI徽章中标签的字体大小。

我使用了style={{ fontSize: "15" }}，但这只影响了其子元素，也就是图标。

代码:

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

- Abdelrahman

---

你可以覆盖 .MuiBadge-dot 类的 CSS 样式。请参考以下工作副本：https://codesandbox.io/s/material-demo-forked-875uf?file=/demo.js - ganesh deshmukh

Answer 1

如果您使用 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>

- vkt

Answer 2

最理想的方式是按照文档中提到的使用类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>
  );
}

- Vishal Rajole

Answer 3

您可以按照以下方式修改字体大小。 在useStyles中创建不同字体大小的样式。

const useStyles = makeStyles((theme) => ({
  font1: {
    fontSize: "1rem"
  },
)}

然后将其分配给 Badge 组件如下：

<Badge
        classes={{
          badge: classes.font1
        }}
        badgeContent={99}
        {...defaultProps}
      />

沙盒

- alisasani

Answer 4

您可以按照以下方式使用componentProps属性（此示例更改徽章中文本的颜色，但相同原理也适用于fontSize）。

  <Badge badgeContent={comments}  componentsProps={{ root: {style: {color: 'white'}}  }}>
     <CommentIcon  />
  </Badge>

- Peter Gerdes