- I am having trouble centering the search box.
- I tried adding marginLeft: "auto",marginRight: "auto" to the search class but it's not working.
- Can you please advise me on how to fix this issue?
- Below is my code snippet and a link to the sandbox:
https://codesandbox.io/s/material-demo-xu3ld
search: {
marginLeft: "auto",
marginRight: "auto",
textAlign: "center"
}
export default function CustomizedInputBase() {
const classes = useStyles();
return (
<div className={classes.search}>
<Paper className={classes.root}>
<IconButton className={classes.iconButton} aria-label="Menu">
<MenuIcon />
</IconButton>
<InputBase
className={classes.input}
placeholder="Search Google Maps"
inputProps={{ "aria-label": "Search Google Maps" }}
/>
<IconButton className={classes.iconButton} aria-label="Search">
<SearchIcon />
</IconButton>
<Divider className={classes.divider} />
<IconButton
color="primary"
className={classes.iconButton}
aria-label="Directions"
>
<DirectionsIcon />
</IconButton>
</Paper>
</div>
);
}