Использовании глобального CSS при стилизации в React
Предположим, у нас есть React компонент
App, в котором есть див, а внутри
дива - три абзаца:
function App() {
return (
<div>
<p>text</p>
<p>text</p>
<p>text</p>
</div>
);
}
Давайте стилизуем этот компонент. Для
этого, в той же папке src с нашим
компонентом создадим обычный CSS файл
со стилями styles.css для наших
тегов.
В этом файле для дива создадим класс
class1 со стилями:
.class1 {
width: 200px;
border: 2px solid brown;
padding: 10px;
text-align: center;
}
Теперь добавим класс class2 со
стилями для первого абзаца:
.class2 {
color: orangered;
font-weight: bold;
}
Класс class3 со
стилями для второго абзаца:
.class3 {
font-style: italic;
color: brown;
}
И, наконец создадим класс class4 для
последнего абзаца:
.class4 {
background-color: orange;
font-weight: bold;
color: white;
}
С CSS файлом мы закончили. Осталось
применить наши CSS стили, которые
мы написали для тегов. Вернемся к
нашему файлу App.js с компонентом.
Первое, что мы должны обязательно сделать -
добавить в начало файла строку импорта
нашего файла стилей styles.css:
import './styles.css';
Теперь, чтобы применить в компоненте
CSS классы из файла, воспользуемся
атрибутом class. Для первого
абзаца у нас был класс class2,
применим его:
<p class="class2">text</p>
Подобным образом добавим классы для остальных тегов. В результате получим следующий код:
<div class="class1">
<p class="class2">text</p>
<p class="class3">text</p>
<p class="class4">text</p>
</div>
Создайте React компонент, который будет
содержать див, а в диве будет две
кнопки. Создайте файл styles.css
с CSS стилями к вашим тегам. Примените
к тегам компонента написанные стили.