How to pass parameter in material ui react styled component

Question

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'

you could give inline style instead, with an object like `AppBarStyle` — shrys, Nov 16 '21 at 05:04

Samira · Answer 1 · 2021-11-16T05:49:52.003

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.

How to pass parameter in material ui react styled component

1 Answers1