title: How to style from an array of objects with using material-ui
body: <p>I'm use functional component of reactjs. I have an array of objects in which the styles are specified</p>
  <pre><code>const data = [
          {
              id: 1,
              color: '#000'
          },
          {
              id: 2,
              color: '#fff'
          }
          // etc
      ]
  </code></pre>
  <p>I need to render as many elements on the page as there are objects in the data array, and each element gets its own unique color (the first element gets color from the first object, the second from the second, etc.).</p>
  <p>For this I use the custom hook useStyles from material-ui.</p>
  <pre><code>const useStyles = makeStyles((theme) =&gt; ({
      divColor: {
          background: data.map((el) =&gt; (
              el.color
          )
          )
      }
  }));
  </code></pre>
  <p>I expand the HTML part itself like this</p>
  <pre><code>{data.map((el, index) =&gt; &lt;div key={index} className={classes.divColor} /&gt;)}
  </code></pre>
  <p>In this case, I have 2 identical div elements, with the same property</p>
  <pre><code>.makeStyles-startAccident-4 {
      background: #000, #fff;
  }
  </code></pre>
  <p><a href="https://codesandbox.io/s/recursing-mccarthy-n3wsc?file=/src/App.js" rel="nofollow noreferrer">CodeSandBox Example</a></p>
  <p>Where did I go wrong?</p>