Как имитировать несколько имен классов в jsx

Question

Как я могу воссоздать следующий CSS в модуле CSS реактивного стиля?

.thing1, .thing2, .thing3, .thing4 {color: red}

.thing5, .thing6, .thing7 {color: blue}

По сути, я получаю реквизит, содержащий число / строку, которые сгруппированы в один и тот же CSS.Но я не уверен, как бы я воссоздать эту настройку в JavaScript.Ниже, кажется, немного глупо делать.Я также хотел бы, если бы я мог избежать чего-то вроде поиска массива

const styles = {
  thing1:{ color:red },
  thing2:{ color:red },
  thing3:{ color:red },
  thing4:{ color:red },
  thing5:{ color:blue },
  thing6:{ color:blue },
  thing7:{ color:blue },
}

Мысли?

Редактировать

Так что пример будет:

render() {
  let {classes} = this.props
  return (
    <div className={??? + this.props.input}></div>
  )
}

если бы я пошел по маршруту css, я бы сделал

render() {
  let {classes} = this.props
  return (
    <div className={"thing" + this.props.input}></div>
  )
}

Answer 1

Я сделал помощник для слияния стилей, вот оно:

const mergeStyles = styles => styles.join(' ');    
export default mergeStyles;

И я использую это так:

<div className={mergeStyles([styles.boxInfo, styles.narrowBoxInfo])}>

Если стили

.boxInfo {}
.narrowBoxInfo {}

Надеюсь, это поможет!