[英]Full width material-ui Button within a Badge?
我在 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>
);
}
};
只需添加此属性:fullWidth={true}
import { Button } from "@mui/material";
<Button
variant="contained"
fullWidth={true}
type="submit"
>
Click me
</Button>
您必须将 fullWidth 属性应用于徽章
<Badge badgeContent={4} color={"secondary"} fullWidth> <Button variant={"outlined"} color={"secondary"}> Todo </Button> </Badge>
我可以想出一个使用 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
希望这会帮助你。
一种简单的方法是使用Badge
上的sx
属性将width
设置为'100%'
。
<Badge sx={{ width: '100%' }} variant="dot" color="primary" badgeContent={1}>
<Button fullWidth variant="contained" color="neutral">
Button
</Button>
</Badge>
并确保您在Button
上设置了fullWidth
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.