我在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属性应用于徽章
<Badge badgeContent={4} color={"secondary"} fullWidth>
<Button variant={"outlined"} color={"secondary"}>
Todo
</Button>
</Badge>
我可以使用宽度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
希望这会帮助你。