React CSS

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


Вграден стил

За да стилизирате елемент с вградения атрибут style, стойността трябва да бъде JavaScript обект:

Пример:

Поставете обект с информация за стила:

Пример за изпълнение »

Забележка: В JSX изразите на JavaScript се пишат във фигурни скоби и тъй като JavaScript обектите също използват къдрави скоби, стилът в примера по-горе се записва с два комплекта къдрави скоби {{}}.


camelCased имена на свойствата

Тъй като вграденият CSS е написан в JavaScript обект, свойствата с две имена, като background-color, трябва да бъдат написани със синтаксиса camelCased:

Пример:

Използвайте backgroundColor вместо background-color:

Пример за изпълнение »


JavaScript обект

Можете също да създадете обект с информация за стила и да го препратите в атрибута style:

Пример:

Създайте обект на стил с име mystyle:

Пример за изпълнение »


CSS таблица със стилове

Можете да напишете своя CSS стил в отделен файл, като просто го запазете със .css разширение на файла и след това го импортирайте във вашето приложение.

App.css:

Създайте нов файл, наречен „App.css“ и вмъкнете някакъв CSS код в него:

Забележка: Можете да извикате файла както искате, просто запомнете правилното разширение на файла.

Импортирайте таблицата със стилове във вашето приложение:

index.js:

Пример за изпълнение »


CSS модули

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

CSS модулите са удобни за компоненти, които са поставени в отделни файлове.

CSS вътре в модула е достъпен само за компонента, който го е импортирал, и не е нужно да се притеснявате за конфликти при имената.

Създаване на CSS модул с .module.css разширение, пример: mystyle.module.css.

mystyle.module.css:

Създайте нов файл, наречен „mystyle.module.css“ и вмъкнете някакъв CSS код в него:

Импортирайте таблицата със стилове във вашия компонент:

App.js:

Импортирайте компонента във вашето приложение:

index.js:

Пример за изпълнение »