Within a grid, I had initially used fullWidth on a Button to make it expand and fill the container.
Everything was functioning correctly until I enclosed the Button in a Badge element. Now, the fullWidth property is not being applied, and the button reverts back to its default width.
When it was working:
<Button variant={"outlined"} color={"secondary"} fullWidth>
To-do
</Button>
When it stopped working:
<Badge badgeContent={4} color={"secondary"}>
<Button variant={"outlined"} color={"secondary"} fullWidth>
To-do
</Button>
</Badge>
I am now trying to figure out how to ensure that the button expands to fill its parent container.
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>
To-do with badge
</Button>
</Badge>
<Button variant={"outlined"} color={"secondary"} fullWidth>
To-do without badge
</Button>
</Grid>
<Grid item xs={10}>
</Grid>
</Grid>
);
}
};