How to create Material-UI nested style object from array using map in React

Question

I have some prop data that gets passed in like this

columns={
  [
    {
      name: "Fund Name",
      width: "40%"
    },
    {
      name: "Review Date",
      width: "20%"
    },
    {
      name: "Company Debt",
      width: "20%"
    },
    {
      name: "Alerts",
      width: "10%"
    }
  ];
}

I need it to look like this...

const localTheme = {
  overrides: {
    MUIDataTableHeadCell: {
      root: {
        "&:nth-child(1)": {
          width: "40%"
        },
        "&:nth-child(2)": {
          width: "20%"
        },
        "&:nth-child(3)": {
          width: "20%"
        },
        "&:nth-child(4)": {
          width: "10%"
        },
        "&:nth-child(5)": {
          width: "10%"
        }
      }
    }
  }
}

I am trying this...

let rowWidths = this.props.columns.map((item, key) => ({
  "&:nth-child(+key+)": {
    width: item.width
  }
}));

const localTheme = {
  overrides: {
    MUIDataTableHeadCell: {
      root: {
        rowWidths
      }
    }
  }
}

But this obviously doesn't work. Can someone please help.

Thanks

What is '&:nth-child(+key+)' ? Did you mean '&:nth-child(' + key + ')'? — Hao Wu
– Hao Wu, Commented Mar 30, 2020 at 4:12

Shubham Khatri · Accepted Answer · 2020-03-30 04:16:04Z

1

You can make use of Object.assign, spread syntax and the string literals to get the desired result

let columns=[
{
    name: "Fund Name",
    width: "40%"
}, {
    name: "Review Date",
    width: "20%"
}, {
    name: "Company Debt",
    width: "20%"
}, {
    name: "Alerts",
    width: "10%",
}]

let rowWidths = columns.map((item, key) =>
        ({
            [`&:nth-child(${key})`]: {
                width: item.width
            }
        })
    );

const localTheme = {
        overrides: {
            MUIDataTableHeadCell: {
                root: Object.assign({}, ...rowWidths)
            }
       }
  } 
  
  console.log(localTheme, rowWidths);

answered Mar 30, 2020 at 4:16

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

keikai · Accepted Answer · 2020-03-30 04:33:51Z

1

Use Object.fromEntries() to write it in one line

transforms a list of key-value pairs into an object.

  const root = Object.fromEntries(
    columns.map((x, idx) => [`&:nth-child(${idx + 1})`, { width: x.width }])
  );

Demo try it in-text:

const columns = [
  {
    name: "Fund Name",
    width: "40%"
  },
  {
    name: "Review Date",
    width: "20%"
  },
  {
    name: "Company Debt",
    width: "20%"
  },
  {
    name: "Alerts",
    width: "10%"
  }
];

const root = Object.fromEntries(
  columns.map((x, idx) => [`&:nth-child(${idx + 1})`, { width: x.width }])
);

const localTheme = {
  overrides: {
    MUIDataTableHeadCell: {
      root: root
    }
  }
}

console.log(localTheme);

edited Mar 30, 2020 at 4:33

answered Mar 30, 2020 at 4:11

keikai

15.3k10 gold badges56 silver badges73 bronze badges

1 Comment

MomasVII Over a year ago

Turns out this doesn't work with IE which is crucial for me.

Pushkin · Accepted Answer · 2020-03-30 04:18:09Z

0

So basically what you want to do is convert '&:nth-child(+key+)' to '&:nth-child(1)' , '&:nth-child(2)' and so on right.

To use JS expression or dynamic string as keys in an object you need to use them within square brackets []. I'm using reduce instead of map since the output must be objects instead of array

let rowWidths = this.props.columns.reduce((acc, item, key) =>
  ({
    ...acc,
    [`&:nth-child(${key})`]: {
       width: item.width
     }
   }),
   {}
);

And use spread operator to spread them open in localTheme

const localTheme = {
  overrides: {
    MUIDataTableHeadCell: {
      root: {
        ...rowWidths 
      }
   }

edited Mar 30, 2020 at 4:18

answered Mar 30, 2020 at 4:12

Pushkin

3,6441 gold badge19 silver badges36 bronze badges

Collectives™ on Stack Overflow

How to create Material-UI nested style object from array using map in React

3 Answers 3

Comments

Use Object.fromEntries() to write it in one line

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Use Object.fromEntries() to write it in one line

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related