Material-UI: передавать реквизиты для использования стилей при использовании Array.map ()

Question

Я провел некоторые исследования по передаче реквизитов в makeStyles в Material-UI, и этот ответ имеет решение, которое передает реквизиты как переменную. Но было бы неплохо, если бы я мог передавать значения массива и стилям. Например, невозможно установить URL-адрес фонового изображения с помощью 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>
  );
};

В качестве альтернативы, 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 из devtools)

Answer 2

используйте $ для настройки:

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

Пример: ЗДЕСЬ