Dynamically generated classes ignored

I am trying to have a dynamic list of items and give each a sequentially calculated class, a spinner where I can just say the number of parts and they will be spaced automatically. This is partial code without the whole animation CSS:

const styles = theme => ({
  letters: {
    position: 'absolute'
  },
  letter: getLetterClasses(5),
  'letter-0': { left: 50 }
})

const getLetterClasses = (number) => {
  let list = {}

  for (let i = 0; i < number; i++) {
    list[`&-${i}`] = { left: 20 * i }
  }

  return list
}

//=============

const spinner = spinner_array.map((letter, i) => {
  const cls = classnames(classes.letters, classes[`letter-${i}`])
  return <div className={cls} key={i}>{letter}</div>
})

This only works when I create each class explicitly, like letter-0, but ignores the dynamic part. I have no idea why since the object generation seems to work correctly. https://codesandbox.io/s/30w6l0v786

• jss: 8.6.1
• Chrome 69
• macOS Mojave

[kof]

Your problem is not with JSS, but with how you use the classes. I fixed your class name concatentation https://codesandbox.io/s/k3nj04j9po

[HenriBeck]

https://codesandbox.io/s/r70674owo4