Блог

Как я мог бы воссоздать следующий css в модуле css в стиле react?

.thing1, .thing2, .thing3, .thing4 { цвет: красный}

.thing5, .thing6, .thing7 { цвет: синий}

По сути, я получаю prop, содержащий число / строку, которые сгруппированы в один и тот же 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>
  )
}
  

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

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

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

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

Если стили являются

 .boxInfo {}
.narrowBoxInfo {}
  

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