0
155
ViewsLas tarjetas MUI no se representan con estilo
Estoy importando el componente Card desde MUI pero el componente no tiene ningún estilo.
import * as React from "react"; import Box from "@mui/material/Box"; import Card from "@mui/material/Card"; import CardActions from "@mui/material/CardActions"; import CardContent from "@mui/material/CardContent"; import Button from "@mui/material/Button"; import Typography from "@mui/material/Typography"; const bull = ( <Box component="span" sx={{ display: "inline-block", mx: "2px", transform: "scale(0.8)" }} > • </Box> ); export default function BasicCard() { return ( <Card sx={{ minWidth: 275 }}> <CardContent> <Typography sx={{ fontSize: 14 }} color="text.secondary" gutterBottom> Word of the Day </Typography> <Typography variant="h5" component="div"> be{bull}nev{bull}o{bull}lent </Typography> <Typography sx={{ mb: 1.5 }} color="text.secondary"> adjective </Typography> <Typography variant="body2"> well meaning and kindly. <br /> {'"a benevolent smile"'} </Typography> </CardContent> <CardActions> <Button size="small">Learn More</Button> </CardActions> </Card> ); }Cómo se supone que debe verse el componente: Componente MUI
Aspecto real del componente: Componente importado
¿Cómo puedo agregar estilo?
·
Juan Pablo Isaza
1 answers
Answer question0
Probablemente tenga text-align: center establecido en algún lugar del padre. Esto suele suceder cuando crea un proyecto de reacción con una plantilla como CRA que tiene algunos archivos CSS como este :
.App { text-align: center; } Puede solucionarlo encontrando y eliminando esa propiedad text-align o restableciéndola en su Card :
<Card sx={{ minWidth: 275, textAlign: "initial" }}>Si lo que quiere decir es el fondo oscuro, puede lograrlo configurando el modo de tema en oscuro:
import { ThemeProvider, createTheme } from "@mui/material/styles"; const theme = createTheme({ palette: { mode: "dark" } }); <ThemeProvider theme={theme}> <Card sx={{ minWidth: 275 }}> {...} </Card> </ThemeProvider> 
·
Juan Pablo Isaza
Report
Answer question