Блог

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

1. Мой файл jsx

 import styles from './index.less'

const MyComponent= () => {  

  return (
    <Col className={styles['dataCardsWrapper','dataCardsRows','dataCardsCols']} {...topColResponsiveProps}>
         <DataCard index="1"></DataCard> 
     </Col>
  )
}

export default EnergyCostSummary
 

2. индекс.меньше

 .dataCardsWrapper{
  .dataCardsRows{
    background: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    border: 1px solid #eee;
    margin-bottom: 10px;
    .dataCardsCols{
      border-radius: 5px;
      // border: 1px solid #eee;
      padding: 0px 15x;
      width: 100%;
      background: #fff;
      position: relative;
      // box-shadow: 0px 0px 3px #ccc;
      min-height: 140px;
    }
  }
}
 

Я думаю, что понял, в чем дело. Результат выглядит следующим образом