tengo este componente
const MyComponent = (props) => { const classes = useStyles(props); return ( <div className={classes.divBackground} backgroundImageLink={props.product?.image} sx={{ position: "relative" }} ></div> ); }; export default MyComponent;Estoy tratando de pasar el enlace de backgroundImage en accesorios y tratando de poner en makeStyles
export default makeStyles(props => ({ divBackground:{ background:`url("${props.backgroundImageLink}")`, } }));Pero esto no funciona
y estoy recibiendo esta advertencia en la consola
index.js:1 Warning: React does not recognize the `backgroundImage` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `backgroundimage` instead. If you accidentally passed it from a parent component, remove it from the DOM element. const MyComponent = (props) => { const classes = useStyles(props)(); return ( <div className={classes.divBackground} backgroundImageLink={props.product?.image} sx={{ position: "relative" }} ></div> ); }; export default MyComponent;después :
export default useStyles=(props)=>makeStyles(()=> ({ divBackground:{ background:`url("${props.backgroundImageLink}")`, } }));Se supone que no debes pasar atributos arbitrarios a los elementos nativos ( div en este caso) porque no hace nada. El accesorio solo funciona cuando se pasa en useStyles :
export default makeStyles({ divBackground: { background: props => `url("${props.product?.image}")`, } }); const MyComponent = (props) => { // you only need to pass the props here. useStyles will then use the // prop.product.image to create the background property, generate a // stylesheet and return the class name for you. const classes = useStyles(props); return ( <div className={classes.divBackground} // remove this line -----> backgroundImageLink={props.product?.image} sx={{ position: "relative" }} ></div> ); };