徽章内的全宽材料-ui按钮？答案

【问题标题】：Full width material-ui Button within a Badge?徽章内的全宽材料-ui按钮？
【发布时间】：2019-02-19 14:16:36
【问题描述】：

我在 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>
        );
    }
};

【问题讨论】：

标签： javascript css reactjs material-design material-ui

【解决方案1】：

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

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

【讨论】：

这对我不起作用。（对不起，应该提到我试过这个）
您是否尝试将其添加到徽章？
是的，完全按照您的建议。
在开发工具中检查徽章宽度是否为fullWidth？如果它是 fullWidth 并且按钮宽度不是 fullWidth 则为两者应用 fullWidth 属性。
即使我将它应用于两个元素，它也不起作用。您是在这里猜测，还是在本地对您有用？

【解决方案2】：

我可以想出一个使用 width CSS 属性的解决方案：

这是我的答案：

const styles = theme => ({
  margin: {
    margin: theme.spacing.unit * 2,
    width: '100%'
  }
});

function SimpleBadge(props) {
  const { classes } = props;
  return (
    <Grid container>
      <Grid item xs={11}>
      <Badge color="primary" badgeContent={4} className={classes.margin} >
        <Button variant="contained" fullWidth>Button</Button>
      </Badge>

      </Grid>
    </Grid>
  );
}

请发现我在徽章样式中使用了width: '100%'。

这是一个工作示例：https://codesandbox.io/s/wqm9kmxmql

希望这会对你有所帮助。

【讨论】：