Recently, I developed a new 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;
The above code showcases the styles for this particular 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'
},
}));
I am considering replacing the static image link in the CSS of AppBar with a dynamically passed prop image. For example:
AppBar:{
background:'url(`$(image)`)',
objectFit: 'cover',
color:'black',
height:'300px'