在 jss 中为 backgroundImage 动态插入 url 时，我没有得到任何图像。 反应, material-ui

Question

I can get the image statically displayed by importing it and using the variable in useStyles as in the following chunk:

import React from 'react'
import { makeStyles } from '@material-ui/core/styles'
import { Box } from '@material-ui/core'
import Image from '../../Images/Shanghai.png'

const useStyles = makeStyles(img => ({
  image: {
    backgroundImage: 'url('+ image +')',
    backgroundPosition: 'center',
    width: '100%',
    height: '10rem',
    backgroundSize: 'cover'
  }
}))

const ImageHeader = props => {
const img = props.img
const classes = useStyles(img)

return <Box sm={12} className={classes.image} />
    }

export default ImageHeader

but when I try a dynamic approach like so:

import React from 'react'
import { makeStyles } from '@material-ui/core/styles'
import { Box } from '@material-ui/core'

const useStyles = makeStyles(img => ({
  image: {
    backgroundImage: 'url(' + img + ')',
    backgroundPosition: 'center',
    width: '100%',
    height: '10rem',
    backgroundSize: 'cover'
  }
}))

No image is displayed and I get this value:

 backgroundImage: url([object object])

Any help appreciated.

Answer 1

As per the docs :

useStyles. It accepts one argument: the properties that will be used for "interpolation" in the style sheet.

Basically, the argument in makeStyles callback represents your theme which is an object. In order to use the argument passed to useStyles in makeStyles 's callback, you have to use the callback approach for the backgroundImage property.

...
const useStyles = makeStyles(theme => ({ // <---------- theme is an object
  image: {
    backgroundImage: (image) => 'url('+ image +')', // <---------- like this
    backgroundPosition: 'center',
    width: '100%',
    height: '10rem',
    backgroundSize: 'cover'
  }
}))

const ImageHeader = props => {
const img = props.img
const classes = useStyles(img)
...