**Quiero crear un componente que tenga libros en las pestañas receptivas, pero utilicé la cuadrícula de la interfaz de usuario del material para organizarlos según el ancho de la pantalla, pero no sé qué se hizo mal, deben organizarse en 2 columnas a continuación es el código y captura de pantalla de mi resultado **
import React from 'react' import { Grid, Typography, Box, makeStyles } from "@material-ui/core" const useStyles = makeStyles({ container: { width: "100%", border: "2px solid green", "& > *": { textAlign: "center" } }, names: { display: "flex" } }) function Books() { const classes = useStyles() return ( <Box className={classes.container}> <Grid item lg={6}> <Typography className={classes.names}>HEllo</Typography> <Typography className={classes.names}>HEllo</Typography> </Grid> </Box> ) } export default Books**Quiero que se organicen en 2 columnas**
Aquí hay un ejemplo funcional de lo mismo en codesandbox .
Aquí está el código.
import ReactDOM from "react-dom"; import { Grid, Typography, Box, makeStyles } from "@material-ui/core"; const useStyles = makeStyles({ container: { width: "100%", border: "2px solid green", "& > *": { textAlign: "center" } }, names: { display: "flex" } }); function App() { const classes = useStyles(); return ( <Box className={classes.container}> <Grid container> <Grid item xs={6}> <Typography className={classes.names}>HEllo</Typography> </Grid> <Grid item xs={6}> <Typography className={classes.names}>HEllo</Typography> </Grid> </Grid> </Box> ); }