0
318
Visualizações¿Cómo creo un componente reutilizable para las tarjetas y cómo puedo usar los nuevos estilos de diseño de material-ui?
En demo.js , quería usar Card junto con su CardHeader y poner palabras dentro de CardContent . Además, también CardComponent en otros archivos. ¿Cómo puedo hacer que CardComponent reutilizable?
Códigos de muestra: https://codesandbox.io/s/basiccard-material-demo-forked-kkshx?file=/demo.js
A continuación se muestran los códigos para el demo.js :
import * as React from "react"; import CardComponent from "./CardComponent"; export default function BasicCard() { return ( <> <h1>Hello</h1> <CardComponent /> </> ); } A continuación se muestran los códigos para CardComponent :
import React from "react"; import Card from "@mui/material/Card"; import CardContent from "@mui/material/CardContent"; import { CardHeader } from "@mui/material"; const CardComponent = () => { const CardStyle = { maxWidth: 500, margin: "0 auto", marginBottom: "1rem", marginTop: "1rem" }; return ( <Card sx={{ minWidth: 275 }} elevation={5} style={CardStyle}> <CardHeader title="Card Header Title here" /> <CardContent>//content here</CardContent> </Card> ); }; export default CardComponent; También tengo otra pregunta sobre este componente. Viniendo de material-ui4, mui5 fue un poco confuso ya que ya no puedo usar makeStyles . Intenté agregar esto en el ejemplo de codesandbx, sin embargo, dirá que no se encontró la dependencia:
import { makeStyles } from '@mui/styles'; Por lo tanto, me conformé con const CardStyle . ¿Alguna ayuda sobre cómo puedo implementar la versión más nueva de makeStyles ? Además, ¿necesito instalar otras dependencias de material-ui para que funcione? A continuación se muestra el package.json file .
También en: https://www.reddit.com/r/reactjs/comments/sgqhh3/how_do_i_make_a_reusable_component_for_the_cards/
1 Respostas
Responde à pergunta0
Puede hacerlo reutilizable agregando accesorios al componente de su tarjeta infantil. Puede agregar tantos accesorios como desee para hacer tarjetas diferentes usando el mismo patrón.
Para dar estilos al componente en mui v5, debe usar styled. Tienes que importarlo desde @mui/material/styles
Aquí está el código completo del nuevo componente de la tarjeta.
import React from "react"; import {styled} from "@mui/material/styles" import Card from "@mui/material/Card"; import CardContent from "@mui/material/CardContent"; import { CardHeader } from "@mui/material"; const StyledCard = styled((props) => ( <Card {...props} /> ))(({ theme }) => ({ maxWidth: 500, margin: "0 auto", marginBottom: "1rem", marginTop: "1rem" })); const CardComponent = (props) => { const {title,content}=props return ( <StyledCard sx={{ minWidth: 275 }} elevation={5}> <CardHeader title={title} /> <CardContent>{content}</CardContent> </StyledCard> ); }; export default CardComponent;Y aquí está toda la caja de códigos.
