Material-UI/React：AppBarにバッジの通知ボタンを正しく追加するにはどうすればいいですか？

Question

material-uiとreact/jsxを使って、私はAppBarを持っています。私はバッジ（番号）付きの通知メニューアイコンを追加する、つまり新しい通知の数を表示したいと考えました。

問題は、バッジが正しく表示されないことです。つまり、奇妙なスタイルと見ています。ここで

は、私はすでに

<AppBar> 
    <IconMenu anchorOrigin={{ horizontal: 'right', vertical: 'top' }} 
       targetOrigin={{ horizontal: 'right', vertical: 'bottom' }} 
       iconButtonElement={ 
        <FlatButton label={<Badge badgeContent={5} />} icon={<NotificationsIcon />} /> 
       } 
    /> 
</AppBar> 

その方法を試してきたもので、バッジはベル（通知）アイコンを正しく整列されることはありません。

私はまた、AppBar's iconElementRightプロパティのIconMenuの一部を無駄にしようとしました。

助けが必要ですか？

Answer 1

あなたは正しいです - 適切なネスティングオーダーを試してみるようですが、その場合でも少しスタイルを微調整する必要があります。しかし、ここで私がハックされずにまともに見えると思うのサンプルwebpackbinです：http://www.webpackbin.com/EJqz0NVzM

<AppBar> 
    <IconMenu 
    iconButtonElement={ 
     <IconButton style={{ padding: 0 }}> 
     <Badge 
      badgeStyle={{ top: 12, right: 12, backgroundColor: colors.yellow800 }} 
      badgeContent={5} 
      secondary={true} 
      > 
      <NotificationIcon color={muiTheme.appBar.textColor} /> 
     </Badge> 
     </IconButton> 
    } 
    > 
    <MenuItem primaryText="View Notifications" /> 
    <MenuItem primaryText="Dismiss All" /> 
    </IconMenu> 
</AppBar> 

は、コンポーネントが正しくネストすると、最後のビットがゼロにIconButtonにパディングを設定しています。これを実行すると、マテリアルユーザーマニュアルに従って期待どおりに表示されます。

この設定では、私の謙虚な意見では、バッジが通知アイコンから少し離れすぎています。そこで、カスタムの「badgeStyle」を追加して、通知アイコンの上にオーバーレイするバッジを内側に微調整しました。私はまたバッジにもカスタム黄色を貼り付けました。そのバッジの外観をさらにカスタマイズできることを説明するために（borderRadius、boxShadow、fontSizeなどを変更できます）

希望します！