как динамически создавать стиль с реагировать и меньше

Question

Я хочу добавить класс с динамическим c именем, таким как:

import React from 'react';
import styles from './style.less';

export default () => {
  return (
    <div className="__HOW TO ADD CLASS HERE__"> hello </div>
  );
}

, и мой меньше ниже:

// style.less

.loop(@i) when (@i < 10) {
  @className: ~".test@{i}";
  @{className} {
    background: #43389F;
  }
  .loop(@i + 1);
}

.loop(0);

Есть какие-нибудь идеи, чтобы сделать, как это?