Material-UI：使用Array.map（）时将道具传递给useStyles

Question

我已经对在Material-UI中将道具传递给makeStyles进行了一些研究，并且this answer拥有将道具作为变量传递的解决方案。但是如果我也可以将数组值传递给样式，那就太好了。例如，无法使用makeStyles设置背景图片的网址。

const useStyles = makeStyles((theme) => ({
  root: {
    borderRadius: props => props.raidus
    backgroundImage: props => `url(${props.urls[0]})` // failure -- This will set every url to first image
  }
}));

export default App = () = {
  const urls = [
      'path/image-1.jpg', 
      'path/image-2.jpg',
      'path/image-3.jpg',
  ];
  const props = {
    radius: 10,
    urls: urls
  };
  
  const classes = useStyles(props);

  return (
    <div>

    {urls.map((url, index) => {
      <div
        key={index}
        className={classes.root}  // <--- I want it handled here
        // styles={{ background: `url(${url})` }}  // <--- alternative way
      />
    )}

    </div>
  );
};

或者，可以使用内嵌样式设置背景图片的网址（如注释行中所示），但是我希望可以在Material-UI的样式内处理它们。可以在类root中完成吗？任何帮助将不胜感激。

Answer 1

您需要另一个获取url并将其传递给useStyles()

的组件

const urls = ["path/image-1.jpg", "path/image-2.jpg", "path/image-3.jpg"];

const useStyles = makeStyles(theme => ({
  root: {
    borderRadius: props => props.radius,
    backgroundImage: props => `url(${props.url})`
  }
}));

function MyComponent(props) {
  const { url } = props;

  const styleProps = {
    radius: 10,
    url
  };

  const classes = useStyles(styleProps);

  return (
    <div
      className={classes.root}
    >
      {url}
    </div>
  );
}

export default function App() {
  return (
    <div>
      {urls.map((url, index) => (
        <MyComponent key={index} url={url} />
      ))}
    </div>
  );
}

工作示例（从devtools中检查 background-image 属性）

Answer 2

使用$进行设置：

backgroundImage: (props) => `url(${props.url[0]})`

示例：HERE