Hi a wanted to generate dynamic CSS rules based on the props comes in the REACT component. I get an array as props and i want to generate nth-child css rules based on the length of the props. For example:

while (marks[i] && marks[i].direction !== 's') {
    const rule = {
      selector: `.item:nth-child(${2 * length}n + ${length + 1 + i})`,
      styles: `grid-column:${length - i};`,
    };
    arr.push(rule);
    i++;
  }

Where marks is the props array comes in and the length is the length of the marks array. It generates the CSS rules, but how can i apply them on the component.

OR any other solutions for this?