徽章内的全宽 material-ui 按钮？

Question

我在 Grid 中有一个 Button 并使用 fullWidth 展开它以填充容器。

这工作得很好，直到我把它包在徽章里。现在 fullWidth 属性被忽略，按钮是默认宽度。

工作正常：

 <Button variant={"outlined"} color={"secondary"} fullWidth>
    Todo
</Button>

现在不工作：

 <Badge badgeContent={4} color={"secondary"}>
    <Button variant={"outlined"} color={"secondary"} fullWidth>
        Todo
    </Button>
</Badge>

如何让按钮展开以填充其父级？

 import React, {Component} from 'react';
import Grid from "@material-ui/core/Grid/Grid";
import Button from "@material-ui/core/Button/Button";
import Badge from "@material-ui/core/Badge/Badge";

export default class App extends Component {
    render() {
        return (

            <Grid container style={{margin: 10}}>
                <Grid item xs={2}>

                    <Badge badgeContent={4} color={"secondary"}>
                        <Button variant={"outlined"} color={"secondary"} fullWidth>
                            Todo badge
                        </Button>
                    </Badge>

                    <Button variant={"outlined"} color={"secondary"} fullWidth>
                        Todo no badge
                    </Button>
                </Grid>
                <Grid item xs={10}>

                </Grid>
            </Grid>
        );
    }
};

原文由 Duncan Jones 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您必须将 fullWidth 属性应用于徽章

 <Badge badgeContent={4} color={"secondary"} fullWidth>
    <Button variant={"outlined"} color={"secondary"}>
        Todo
    </Button>
</Badge>

原文由 samnu pel 发布，翻译遵循 CC BY-SA 4.0 许可协议