Javascript 徽章内的全宽材质ui按钮？

我在网格中有一个按钮，使用

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

import React，{Component}来自'React'；
从“@material ui/core/Grid/Grid”导入网格；
从“@物料界面/核心/按钮/按钮”导入按钮；
从“@material ui/core/Badge/Badge”导入徽章；
导出默认类应用程序扩展组件{
render（）{
返回(
待办事项徽章
Todo无徽章
);
}
};

您必须对徽章应用fullWidth属性

待办事项

我可以使用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>
  );
}

constyles=theme=>({
保证金：{
边距：theme.spacing.unit*2，
宽度：“100%”
}
});
函数SimpleEdge（道具）{
常量{classes}=props；
返回(
按钮
);
}

请发现我在徽章样式中使用了

宽度：“100%”

以下是一个工作示例：

---

希望这能对您有所帮助。

这对我不起作用。（对不起，我应该提到我尝试过这个）您尝试过将其添加到badge吗？是的，完全按照您的建议。签入开发工具是否为badge width是否为fullWidth？如果它是fullWidth，而button width不是fullWidth，则为这两个元素应用fullWidth属性。即使我将其应用于这两个元素，它也不起作用。你是在这里猜，还是在本地对你有用？