javascript - Material -UI : Pass props to useStyles when using Array. map ()

Question

我已经做了一些关于在 Material-UI 中将 props 传递给 makeStyles 的研究，并且 this answer有将 props 作为变量传递的解决方案。但如果我也可以将数组值传递给样式，那就太好了。例如，无法使用 makeStyles 设置背景图像的 url。

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>
  );
};

或者，可以使用内联样式设置背景图像的url(如注释掉的行所示)，但我希望它们在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>
  );
}

工作示例(从开发工具中检查background-image属性)