Material-UIのBadgeにスタイルを適用する方法

7253 ワード
React material-ui React テキストリンク

日本語情報が見つからなかったため(※1)備忘録として残しておきます。

※1: Material-UIの公式ドキュメントの日本語訳におそらく存在するが、わしゃーわからん

状況

ページ上部のツールバーをデフォルトよりも狭くしているため、アイコン＋バッジ表示をさせるとしっかりと収まりきらないのでなんかもやもやする

const useStyles = makeStyles((theme) => ({
  navbar: {
    height: 32,
    minHeight: 32,
  },
}))

  <AppBar position="static">
    <Toolbar className={style.navbar}>
      <IconButton aria-label="show 17 new notifications" color="inherit">
        <Badge badgeContent={17} color="secondary" >
          <Notifications fontSize="small" />
        </Badge>
      </IconButton>
    </Toolbar>
  </AppBar>

対応策

Badgeのclassesに{badge: style}の形でスタイルを渡してやるとうまくいくらしい

const useStyles = makeStyles((theme) => ({
  navbar: {
    height: 32,
    minHeight: 32,
  },
  badge: {
    height: 15, // デフォルトは20
    fontSize: '0.6rem' // デフォルトは0.75rem
  }
}))

  const style = useStyles();
  <AppBar position="static">
    <Toolbar className={style.navbar}>
      <IconButton aria-label="show 17 new notifications" color="inherit">
        <Badge badgeContent={17} color="secondary" classes={{badge: style.badge}} >
          <Notifications fontSize="small" />
        </Badge>
      </IconButton>
    </Toolbar>
  </AppBar>

結果

収まったけど文字が小さい

参考

How to style the badge component? - Stack Overflow

You can add styles to the inner span using the classes attribute:
<Badge badgeContent={"11"} classes={{badge: classes.myBadge}}>
Where myBadge is defined in makeStyles:
const useStyles = makeStyles((theme) => ({
myBadge:{
right: "inherit",
}
}));