CSS модулите предоставят начин за локален обхват на имена на CSS класове. Не е нужно да се притеснявате за замяна на стилове, когато използвате едно и също име на клас.

Разберете как работят CSS модулите, защо трябва да ги използвате и как да ги внедрите в React проект.

Какво представляват CSS модулите?

The CSS модули документи описват CSS модул като CSS файл, чиито имена на класове са с локален обхват по подразбиране. Това означава, че можете да адресирате CSS променливи с едно и също име в различни CSS файлове.

Вие пишете модулни класове на CSS точно като нормалните класове. След това компилаторът генерира уникални имена на класове, преди да изпрати CSS на браузъра.

Например, разгледайте следния .btn клас във файл, наречен styles.modules.css:

.btn {
 ширина: 90px;
 височина: 40px;
 подложка: 10px 20px;
}

За да използвате този файл, трябва да го импортирате в JavaScript файл.

импортиране стилове от "./styles.module.js"

Сега, за да посочите .btn класа и да го направите достъпен в елемент, ще използвате класа, както е показано по-долу:

instagram viewer 
клас="styles.btn"

Процесът на изграждане ще замени CSS класа с уникално име на формата като _styles__btn_118346908.

Уникалността на имената на класовете означава, че дори ако използвате едно и също име на клас за различни компоненти, те няма да се сблъскат. Можете да гарантирате по-голяма независимост на кода, тъй като можете да съхранявате CSS стиловете на компонент в един файл, специфичен за този компонент.

Това опростява отстраняването на грешки, особено ако работите с множество таблици със стилове. Ще трябва само да проследите CSS модула за определен компонент.

CSS модулите също ви позволяват да комбинирате множество класове чрез композира ключова дума. Например, разгледайте следния .btn клас по-горе. Можете да „разширите“ този клас в други класове, като използвате composes.

За бутон за изпращане може да имате:

.btn {
/* стилове */
}
.Изпращане {
 съставя: btn;
 цвят на фона: зелен;
 цвят:#FFFFFF
}

Това комбинира класовете .btn и .submit. Можете също така да композирате стилове от друг CSS модул като този:

.Изпращане {
 съставя: първичен от "./colors.css"
 цвят на фона: зелен;
}

Имайте предвид, че трябва да напишете правилото за съставяне преди други правила.

Как да използвате CSS модули в React

Как използвате CSS модули в React зависи от това как създавате приложението React.

Ако използвате create-react-app, CSS модулите се настройват веднага. Ако обаче възнамерявате да създадете приложението от нулата, ще трябва да конфигурирате CSS модули с компилатор като webpack.

За да следвате този урок, трябва да имате:

  • Възел, инсталиран на вашата машина.
  • Основно разбиране на ES6 модулите.
  • Основен разбиране на React.

Създаване на React приложение

За да опростите нещата, можете да използвате create-react-app за скеле на приложение React.

Изпълнете тази команда за създайте нов React проект наречени react-css-modules:

npx създавам-react-app реагират-css-модули

Това ще генерира нов файл, наречен react-css-modules с всички зависимости, необходими, за да започнете с React.

Създаване на компонент на бутон

В тази стъпка ще създадете компонент Button и CSS модул, наречен Button.module.css. В папката src създайте нова папка, наречена Components. В тази папка създайте друга папка, наречена Button. Ще добавите компонента Button и неговите стилове в тази папка.

Навигирайте до src/Компоненти/Бутон и създайте Button.js.

износпо подразбиранефункцияБутон() {
връщане (
<бутон>Изпращане</button>
 )
}

След това създайте нов файл с име Button.module.css и добавете следното.

.btn {
 ширина: 90px;
 височина: 40px;
 подложка: 10px 20px;
 радиус на границата: 4px;
 граница: няма;
}

За да използвате този клас в компонента Button, импортирайте го като стилове и го препратете в името на класа на елемента бутон по следния начин:

импортиране стилове от "./Button.module.css"
износпо подразбиранефункцияБутон() {
връщане (
<бутон className={styles.btn}>Изпращане</button>
 )
}

Това е прост пример, който показва как да използвате един клас. Може да искате да споделяте стилове в различни компоненти или дори да комбинирате класове. За това можете да използвате ключовата дума composes, както беше споменато по-рано в тази статия.

Използване на композиция

Първо, променете компонента Button със следния код.

импортиране стилове от "./Button.module.css"
износпо подразбиранефункцияБутон({type="primary", label="Button"}) {
връщане (
<бутон className={styles[type]}>{етикет}</button>
 )
}

Този код прави компонента Button по-динамичен, като приема стойност на тип като опора. Този тип ще определи името на класа, приложено към елемента бутон. Така че, ако бутонът е бутон за изпращане, името на класа ще бъде „изпращане“. Ако е „грешка“, името на класа ще бъде „грешка“ и т.н.

За да използвате ключовата дума composes, вместо да пишете всички стилове за всеки бутон от нулата, добавете следното към Button.module.css.

.btn {
 ширина: 90px;
 височина: 40px;
 подложка: 10px 20px;
 радиус на границата: 4px;
 граница: няма;
}
.основен {
 съставя: btn;
 цвят: #FFFFFF;
 Цвят на фона: #6E41E2;
}
.втори {
 съставя: btn;
 цвят: #6E41E2;
 Цвят на фона: #FFFFFF;
}

В този пример първичният клас и вторичният клас използват btn класа. Правейки това, вие намалявате количеството код, който трябва да напишете.

Можете да стигнете до това още повече с външен CSS модул, наречен colors.module.css, съдържащ цветовете, използвани в приложението. След това можете да използвате този модул в други модули. Например създайте файла colors.module.css в корена на папката Components със следния код:

.primaryBg {
 Цвят на фона: #6E41E2
}
.средноBg {
 Цвят на фона: #FFFFFF
}
.primaryColor {
 цвят: #FFFFFF
}
.secondaryColor {
 цвят: #6E41E2
}

Сега във файла Button/Button.module.css променете първичния и вторичния клас, за да използвате горните класове по следния начин:

.основен {
 съставя: btn;
 съставя: първичен Цвят от "../colors.module.css";
 съставя: първиченBg от "../colors.module.css";
}
.втори {
 съставя: btn;
 съставя: вторичен Цвят от "../colors.module.css";
 съставя: вториченBg от "../colors.module.css";
}

Sass с CSS модули

Можете да използвате CSS модули, за да подобрите модулността на вашата кодова база. Като пример, можете да създадете прост CSS клас за компонент на бутон и да използвате повторно CSS класове чрез композиция.

За да подобрите използването на CSS модули, използвайте Sass. Sass—Syntactically Awesome Style Sheets—е CSS препроцесор, който предоставя много функции. Те включват поддръжка за влагане, променливи и наследяване, които не са налични в CSS. Със Sass можете да добавите по-сложни функции към вашето приложение.