he creado un componente
const CategoryDialog = (props) => { const classes = useStyles(); console.log(props); return ( <div> <Dialog fullScreen open={props.dilaogOpenProp} TransitionComponent={Transition} > <AppBar className={classes.AppBar} sx={{ position: "relative" }}> <Toolbar> {/* <IconButton edge="start" color="inherit" aria-label="close" onClick={props.onDialogClose} > <CloseIcon /> </IconButton> */} <Typography sx={{ ml: 2, flex: 1 }} variant="h2" component="div" > <span className={classes.Text}>{props.showCategoryMarbleOnDialog?.qualityName}</span> </Typography> <Button autoFocus color="error" variant='contained' onClick={props.onDialogClose} > Back </Button> </Toolbar> </AppBar> <List></List> </Dialog> </div> ); }; export default CategoryDialog;Estos son los estilos de ese componente.
import { makeStyles,createTheme } from '@material-ui/styles'; export default makeStyles(theme => ({ AppBar:{ background:'url("https://4.imimg.com/data4/LW/DQ/MY-10354786/artificial-quartz-500x500.jpg")', objectFit: 'cover', color:'black', height:'300px' }, Text:{ backgroundColor:'rgba(0,0,0,0.4)', padding:'10px', color:'white', position: 'absolute', top:'10px', left:'10px' }, Button:{ backgroundColor:'rgba(0,0,0,0.1)', padding:'10px' }, }));Lo que quiero hacer en lugar de establecer un enlace de imagen estático en el fondo de CSS de la clase AppBar , quiero pasarlo como un accesorio del archivo de componente prop.image a la clase de barra algo así como
AppBar:{ background:'url(`$(image)`)', objectFit: 'cover', color:'black', height:'300px'Solución sobre cómo usar accesorios y temas en la interfaz de usuario del material: debe pasar una imagen o accesorios a useStyles.
import image1 from "images/404/404-error.svg"; const useStyles = (image)=> makeStyles( theme => ({ AppBar: { backgroundImage: `url(${image})`, } })); export default function ComponentExample({ children, ...props }){ const classes = useStyles(image1)(); return ( <AppBar className={clsx(classes.appBar, { [classes.appBarShift]: open, })} /> ); }Lo probé, funciona muy bien.