title: How to create Material-UI nested style object from array using map in React
body: <p>I have some prop data that gets passed in like this </p>
  
  <pre><code>columns={
    [
      {
        name: "Fund Name",
        width: "40%"
      },
      {
        name: "Review Date",
        width: "20%"
      },
      {
        name: "Company Debt",
        width: "20%"
      },
      {
        name: "Alerts",
        width: "10%"
      }
    ];
  }
  </code></pre>
  
  <p>I need it to look like this...</p>
  
  <pre><code>const localTheme = {
    overrides: {
      MUIDataTableHeadCell: {
        root: {
          "&amp;:nth-child(1)": {
            width: "40%"
          },
          "&amp;:nth-child(2)": {
            width: "20%"
          },
          "&amp;:nth-child(3)": {
            width: "20%"
          },
          "&amp;:nth-child(4)": {
            width: "10%"
          },
          "&amp;:nth-child(5)": {
            width: "10%"
          }
        }
      }
    }
  }
  </code></pre>
  
  <p>I am trying this...</p>
  
  <pre><code>let rowWidths = this.props.columns.map((item, key) =&gt; ({
    "&amp;:nth-child(+key+)": {
      width: item.width
    }
  }));
  
  const localTheme = {
    overrides: {
      MUIDataTableHeadCell: {
        root: {
          rowWidths
        }
      }
    }
  }
  </code></pre>
  
  <p>But this obviously doesn't work. Can someone please help.</p>
  
  <p>Thanks</p>