Како да додате табелу стилова ЦСС модула у вашу Реацт компоненту у 4 једноставна корака

Рецимо да бисте свом пројекту желели да додате ЦСС Модуле Стилесхеет. Овде можете пронаћи упутства Цреате Реацт Апп, али у основи - и као што наводи смерница - ЦСС модули омогућавају вам да користите исти ЦСС селектор у различитим датотекама без бриге око именовања сукоба. То функционише јер сваки ХТМЛ елемент у датотеци који желите да стилизујете аутоматски добија јединствено име класе.

Ово у почетку може изгледати прилично збуњујуће, али заиста се процес примене ЦСС модула може поједноставити на само 4 корака, као што је приказано у доњем примеру.

Додавање модуларног ЦСС-а једноставној компоненти

  1. Карактеристика Реацт-а је да су ЦСС модули „укључени“ за датотеке које се завршавају .module.cssекстензијом. Направите ЦСС датотеку са одређеним именом датотеке у следећем формату:
Link.module.css

2. Увезите стил у компоненту:

import styles from ‘../styling/components/Link.module.css’

3. Стилови у вашој ЦСС датотеци могу следити вашу жељену конвенцију именовања, на пример:

.bold { font-weight: bold;}

4. Стил се примењује на ХТМЛ елемент на следећи начин:

className={styles.bold}

И то је то!

Фото: Адриан Сванцар на Унспласх-у