I have created a component
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;
This is the styles of that component
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'
},
}));
What I want to do instead of setting static image link in the background of CSS of AppBar class I want to pass it as a prop from component file prop.image into class of bar something like
AppBar:{
background:'url(`$(image)`)',
objectFit: 'cover',
color:'black',
height:'300px'
Solution for how to use both props and theme in material UI : you need to pass an image or props to 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,
})}
/>
);
}
I tried it, works very well.