💯 Программирование на языке верстки HTML и стилей CSS [Тема 1-9] — ответы на тесты Синергия / МОИ / МТИ / МосАП

Программирование на языке верстки HTML и стилей CSS > Итоговый тест

• правильные ответы на вопросы из теста по данной дисциплине
• вопросы отсортированы в лексикографическом порядке

Программирование на языке верстки HTML и стилей CSS

• Тема 1. Tailwind. Основы
• Тема 2. Tailwind. Интерактивность
• Тема 3. Tailwind. Расширения
• Тема 4. Tailwind. Кейс
• Тема 5. Верстка в React часть 1
• Тема 6. Верстка в React часть 2
• Тема 7. MUI
• Тема 8. MUI. Компоненты
• Тема 9. MUI. Кейс
• Итоговая аттестация

В проекте используется дизайн система MUI. В заголовке страницы необходимо создать меню, состоящее из кнопок. При этом каждая из кнопок на самом деле должна являться ссылкой и вести на одну страниц приложения, либо являться якорной ссылкой на элемент. Выберите наиболее предпочтительный вариант исполнения кнопки.

Тип ответа: Одиночный выбор • с выбором одного правильного ответа из нескольких предложенных вариантов

• Создать обычный элемент ссылки при помощи тега ˂a˃˂a/˃. Для стилизации элемента использовать обычные CSS классы.
• Cоздать элемент Box. При помощи свойства component превратить этот элемент в ссылку, задав значение component=«a». Для стилизации использовать sx props.
• Cоздать компонент Button. При помощи свойства component превратить этот элемент в ссылку, задав значение component=«a». Для стилизации использовать атрибуты, sx props или утилиту styled().

В проекте используется дизайн система MUI. Для одного из элементов Button необходимо переопределить стили для состояния disabled. Укажите наиболее предпочтительный способ в соответствии с дизайн системой MUI.

Тип ответа: Одиночный выбор • с выбором одного правильного ответа из нескольких предложенных вариантов

• Обратиться к элементу при помощи класса, переопределить нужные свойства, увеличивая специфичность – добавление к селектору псевдокласса.
• Воспользоваться классами состояния внутри sx props. переопределить нужное свойство, уменьшая специфичность.
• Воспользоваться классами состояния внутри sx props. переопределить нужное свойство, увеличивая специфичность.

В проекте используется дизайн система MUI. Задача создания кастомной темы. Необходимо добавить в палитру новый ключевой цвет. При этом заранее известен только базовый вариант цвета. Укажите наиболее предпочтительный вариант создания дополнительного цвета.

Тип ответа: Одиночный выбор • с выбором одного правильного ответа из нескольких предложенных вариантов

• Определить все токи для цвета вручную. Подобрать главный, светлый тёмный вариант и контрастный текст самостоятельно.
• Воспользоваться специализированными функциями из @mui/material/styles: alpha(), getContrastRatio(), getContrastText().
• В MUI нет возможности расширить стандартную палитру.

В проекте используется дизайн система MUI. На главной странице расположены элементы, которые рендерятся из массивов объектов - данных, получаемых от сервера. Как правило, данные приходят с сервера дольше чем за 1 секунду. Данных о прогрессе загрузки сервер не предоставляет. Укажите наиболее предпочтительный вариант реализации интерфейса.

Тип ответа: Одиночный выбор • с выбором одного правильного ответа из нескольких предложенных вариантов

• При помощи условного рендеринга до того, как данные с сервера придут, отображать простую строку «Подождите» вместо списка элементов.
• Отображать пустую страницу. Использовать элемент LinearProgress, чтобы сообщить пользователю, о том что запрос обрабатывается. Использовать детерминированный вариант компонента.
• Не отображать пустую страницу. В контейнере, который будет использоваться для отображения списка элементов, использовать элемент CircularProgress. Тем самым, показывая, что данные для этих элементов скоро подгрузятся с сервера. Использовать недетерминированный вариант компонента.

В проекте используется дизайн система MUI. На странице имеется список элементов, каждый из которых обернут в Tooltip. эти элементы должны иметь подсказки при наведении. Выберите наиболее предпочтительный вариант создания подсказок для повторяющихся элементов.

Тип ответа: Одиночный выбор • с выбором одного правильного ответа из нескольких предложенных вариантов

• Оставить все свойства по умолчанию.
• Добавить только задержку скрытия подсказки после того как элемент становится неактивным.
• Добавить только задержку отображения подсказки во время наведения на элемент.
• Добавить задержку при скрытии и при отображении подсказки.

В проекте используется Styled Components. Необходимо элементу CustomInput задать скругление границ углов в размере 14 пикселей. Заготовка выглядит следующим образом: const CustomInput = styled.input``. Укажите в качестве ответа полное написание необходимого CSS правила, учитывая знаки препинания и пробелы. Пример ответа: margin: 12px;

Тип ответа: Текcтовый ответ

В проекте используются CSS модули. Элемент в DOM дереве имеет класс card_icon__evvnn. Конфигурация CSS модулей имеет стандартную настройку.  Какое название было у файла CSS модуля, в котором был определен этот класс? Запишите ответ в виде строки - полное название файла с раширением.

Тип ответа: Текcтовый ответ

В проекте используются CSS модули. Элемент в DOM дереве имеет класс component_icon__evvnn. Конфигурация CSS модулей имеет стандартную настройку.  Какая из частей класса содержит уникальный идентификатор класса, которая позволяет создавать уникальные изолированные стили? Запишите ответ в виде строки.

Тип ответа: Текcтовый ответ

В разметке компонента находится следующая структура:  { false? ˂h1˃Заголовок1˂/h1˃ : null }.  Какой их фрагментов разметки окажется в результирующей верстки?

Тип ответа: Одиночный выбор • с выбором одного правильного ответа из нескольких предложенных вариантов

• ˂h1˃Заголовок1˂/h1˃
• ˂h2˃Заголовок2˂/h2˃
• null
• undefined

В React используется специальная разновидность разметки - JSX. Напишите полное название атрибута onclick применимо к JSX разметке.

Тип ответа: Текcтовый ответ

Выберите вариант правильного неименованного импорта компонента

Тип ответа: Одиночный выбор • с выбором одного правильного ответа из нескольких предложенных вариантов

• import ˂название_компонента/˃from 'путь_до_файла';
• import название_компонента from 'путь_до_файла';
• import {название_компонента} from 'путь_до_файла';
• import “название_компонента” from 'путь_до_файла';

Выберите полное название класса, с помощью которого можно указать отступ границы (ring) блока в размере 8 пикселей.

Тип ответа: Одиночный выбор • с выбором одного правильного ответа из нескольких предложенных вариантов

• ring-8
• ring-margin-8
• ring-padding-8
• ring-offset-8

Выберите характерные аспекты для Styled Components

Тип ответа: Множественный выбор • с выбором нескольких правильных ответов из предложенных вариантов

• Необходимость взаимодействия с классами
• Нет необходимости взаимодействия с классами
• Возможность темизировать проект
• Нет возможности темизировать проект

За что отвечает поле theme в файле конфигурации Tailwind?

Тип ответа: Одиночный выбор • с выбором одного правильного ответа из нескольких предложенных вариантов

• позволяет регистрировать новые стили для Tailwind для внедрения в таблицу стилей пользователя с использованием JavaScript вместо CSS.
• позволяет вам указать различные конфигурации для использования в качестве основы, что упрощает пакетирование набора настроек, которые вы хотели бы повторно использовать в проектах.
• настраивает пути ко всем вашим HTML-шаблонам, компонентам JavaScript и любым другим исходным файлам, которые содержат имена классов Tailwind.
• определяет цветовую палитру проекта, масштаб шрифтов, шрифты, контрольные точки, значения радиуса границы и многое другое.

Имеется компонент списка новостных анонсов. Предположим, что у нас есть массив данных товаров, которые мы хотим отобразить в виде карточек новостных анонсов, который пришел в этот компонент посредством props. Здесь мы предполагаем, что данные о товарах будут переданы в виде массива объектов с полями order, id, title, price, imageUrl и description.  При рендеринге списков какой вариант задания ключей самый оптимальный?

Тип ответа: Одиночный выбор • с выбором одного правильного ответа из нескольких предложенных вариантов

• Воспользоваться index из перебора по массиву map
• Сгенерировать уникальный ключ библиотекой uuid
• Воспользоваться полем id из базы данных

К какому props компонента Avatar относится описание: Этот параметр определяет стиль аватара. Возм=ожные значения: circle, rounded, square. Значение по умолчанию - circle. Напишите название атрибута в camelCase.

Тип ответа: Текcтовый ответ

К какому props компонента Button относится описание: Указывает, должна ли кнопка занимать всю ширину родительского элемента. Если значение равно true, кнопка будет занимать всю доступную ширину. Значение по умолчанию - false. Напишите название атрибута в camelCase.

Тип ответа: Текcтовый ответ

К какому props компонента Slider относится описание: Степень детализации, с которой ползунок (при дискретном варианте) может перемещаться по значениям? Напишите название атрибута в camelCase.

Тип ответа: Текcтовый ответ

К какому props компонента Table относится описание: Управляет горизонтальным выравниванием текста в ячейке. Он может принимать значения 'left', 'center', 'right', и 'justify'. Значение по умолчанию — 'left'. Напишите название атрибута в camelCase.

Тип ответа: Текcтовый ответ

К какому props компонента TextField относится описание: Это текст, который отображается в текстовом поле, пока пользователь не введет свой собственный текст. Он используется для подсказки пользователю о том, что нужно ввести в поле. Напишите название атрибута в camelCase.

Тип ответа: Текcтовый ответ

К какому props компонента Tooltip относится описание: Определяет задержку появления подсказки при наведении курсора на элемент. Значение указывается в миллисекундах. Если значение равно 0, подсказка появляется сразу при наведении. Если задать значение больше нуля, то подсказка появится через указанное количество миллисекунд. Напишите название атрибута в camelCase.

Тип ответа: Текcтовый ответ

К какому props компонента Tooltip относится описание: Определяет, где будет отображаться всплывающая подсказка относительно элемента. Возможные значения этого свойства: ‘top’ | ‘right’ | ‘bottom’ | ‘left’ | ‘auto’ (позиция подсказки определяется автоматически в зависимости от доступного пространства и ориентации экрана). Напишите название атрибута в camelCase.

Тип ответа: Текcтовый ответ

К какому props компонента Typography относится описание: отвечает за выравнивание текста внутри элемента. Он может принимать следующие значения: ‘left’ | ‘center’ | ‘right’ | ‘justify’. По умолчанию значение этого свойства равно ‘left’, то есть текст выравнивается по левому краю. Напишите название атрибута в camelCase.

Тип ответа: Текcтовый ответ

Как добавить JSS в проект на React? Напишите полностью консольную команду для установки этого пакета через пакетный менеджер Yarn.

Тип ответа: Текcтовый ответ

Как можно управлять порядком элементов в контейнере Flexbox?

Тип ответа: Одиночный выбор • с выбором одного правильного ответа из нескольких предложенных вариантов

• С помощью классов order;
• С помощью классов flex-order;
• С помощью классов align-self;
• С помощью классов justify-self;

Как с помощью служебного класса Tailwind указать длительность перехода в 1 секунду? Классы transition и класс с указанием функции изменения уже указан. Напишите полное название класса.

Тип ответа: Текcтовый ответ

Какие свойства можно анимировать с помощью Tailwind переходов?

Тип ответа: Одиночный выбор • с выбором одного правильного ответа из нескольких предложенных вариантов

• С помощью Tailwind переходов нельзя анимировать никакие свойства.
• С помощью Tailwind переходов можно анимировать все свойства CSS.
• С помощью Tailwind переходов можно анимировать большинство свойств Tailwind, таких как ширина, высота, прозрачность, цвет и т.д.
• С помощью Tailwind переходов можно анимировать некоторые свойства CSS, такие как ширина, высота и прозрачность.

Какого (каких) из служебных классов семейства “поля” нет по умолчанию в Tailwind?

Тип ответа: Одиночный выбор • с выбором одного правильного ответа из нескольких предложенных вариантов

• ps-2.5
• pt-3.5
• px-2
• -px-1

Какого значения для утилиты aspectRatio нет в теме Tailwind по умолчанию?

Тип ответа: Одиночный выбор • с выбором одного правильного ответа из нескольких предложенных вариантов

• auto
• photo
• video
• square

Какого слова не хватает: “________: ˂выбранный цвет˃;”?

Тип ответа: Текcтовый ответ

Какое значение свойства максимальной ширины для компонента Container необходимо указать, если хотим ограничить ширину блока в диапазоне 1200-1536 px (при использовании темы по умолчанию)?

Тип ответа: Одиночный выбор • с выбором одного правильного ответа из нескольких предложенных вариантов

• зз
• sm
• md
• lg

Какое значение свойства максимальной ширины для компонента Container необходимо указать, если хотим ограничить ширину блока в диапазоне 1200-1536 px (при использовании темы по умолчанию)?

Тип ответа: Одиночный выбор • с выбором одного правильного ответа из нескольких предложенных вариантов

• xs
• sm
• md
• lg

Какое количество символов устанавливает утилита max-w-prose в качестве максимального и оптимального для удобства чтения текста.

Тип ответа: Текcтовый ответ

Какое свойство отвечает за количество всегда видимых страниц до и после текущей страницы в компоненте pagination?

Тип ответа: Одиночный выбор • с выбором одного правильного ответа из нескольких предложенных вариантов

• relatredCount
• brothersCount
• sistersCount
• siblingCount

Какое свойство отключает эффект пульсации в компоненте Tabs?

Тип ответа: Одиночный выбор • с выбором одного правильного ответа из нескольких предложенных вариантов

• disable
• disablePulse
• disableRipple
• disableEffect

Какое свойство позволяет отображать элемент текстовые области вместо стандартного поля ввода в компоненте TextField?

Тип ответа: Одиночный выбор • с выбором одного правильного ответа из нескольких предложенных вариантов

• textarea
• textArea
• multiline
• multiLine

Какое свойство устанавливает задержку ожидания перед скрытием всплывающей подсказки, но не влияет на задержку отображение всплывающей подсказки (компонент Tooltip)??

Тип ответа: Одиночный выбор • с выбором одного правильного ответа из нескольких предложенных вариантов

• leaveDelay
• leaveTouchDelay
• enterDelay
• enterTouchDelay

Какое свойство CSS используется для управления прозрачностью элемента?

Тип ответа: Одиночный выбор • с выбором одного правильного ответа из нескольких предложенных вариантов

• opacity
• transparency
• alpha
• visibility

Какой вариант значения свойства variant в компоненте LinearProgress стоит использовать, если значение прогресса отсутствует?

Тип ответа: Одиночный выбор • с выбором одного правильного ответа из нескольких предложенных вариантов

• buffer
• determinate
• indeterminate
• query

Какой вариант является правильным для создания горизонтальной цепочки элементов с использованием Flexbox?

Тип ответа: Одиночный выбор • с выбором одного правильного ответа из нескольких предложенных вариантов

• flex
• inline-flex flex-row-reverse
• block flex-row nowrap
• display-flex flex-row flex-wrap

Какой класс позволяет контейнеру, к которому применен класс prose и действует плагин typography, активировать темную версию темы? Напишите полное название класса вместе с модификатором.

Тип ответа: Текcтовый ответ

Какой размер текста можно считать максимальным из предустановленных в абсолютных единицах измерения в Tailwind? Напишите полное название класса вместе с его базовой частью.

Тип ответа: Текcтовый ответ

Какой служебный класс Tailwind позволяет создать 3 колонки в Grid контейнере?

Тип ответа: Одиночный выбор • с выбором одного правильного ответа из нескольких предложенных вариантов

• cols-3
• grid-template-cols-3
• grid-template-columns-3
• grid-cols-3

Какой служебный класс Tailwind позволяет создать 4 строки в Grid контейнере?

Тип ответа: Одиночный выбор • с выбором одного правильного ответа из нескольких предложенных вариантов

• rows-4
• grid-template-rows-4
• grid-rows-4
• grid-template-rows-4

На странице имеется элемента анонса новостной статьи. Элемент состоит из изображения, тегов и короткого текста. Необходимо ограничить размер текста таким образом, чтобы он занимал одинаковое количество строк. Выберите оптимальный вариант того, как это можно реализовать средствами Tailwind.

Тип ответа: Одиночный выбор • с выбором одного правильного ответа из нескольких предложенных вариантов

• Использовать утилиту line-clamp с указанием количества строк, до которого необходимо ограничить текст
• Использовать утилиты truncate | text-{ellipsis | clip}, чтобы ограничить ширину строки
• Указать максимальную высоту элементу с текстом анонса статьи max-h и ограничить переполнение блока overflow-y-hidden.

При необходимости переопределении стилей для повторно используемых компонентов применяют:

Тип ответа: Одиночный выбор • с выбором одного правильного ответа из нескольких предложенных вариантов

• Утилиту styled()
• Атрибут style
• Атрибут sx
• state-классы

Расположите подстроки названия класса, сгенерированного CSS модулем component, в порядке их написания в результирующем классе.

Тип ответа: Сортировка

• 1 component
• 2 _
• 3 select
• 4 __
• 5 axqqx

Расставьте служебные классы по возрастанию в порядке отображения слоя от самого заднего до самого переднего.

Тип ответа: Сортировка

• 1 0
• 2 10
• 3 20
• 4 30
• 5 40
• 6 50

Стандартная тема содержит следующие точки адаптивности:

Тип ответа: Одиночный выбор • с выбором одного правильного ответа из нескольких предложенных вариантов

• mobile, tablet, laptop, desktop
• mobile, tablet, laptop, desktop, large-desktop
• xs, sm, md, lg, xl
• xs, sm, md, lg, xl, 2xl

Укажите в порядке возрастания непрозрачности (от прозрачного до непрозначного) значения служебного класса opacity в Tailwind.

Тип ответа: Сортировка

• 1 0
• 2 10
• 3 50
• 4 75
• 5 100

Укажите порядок действий для инициализации проекта с использованием MUI.

Тип ответа: Сортировка

• 1 npx create-react-app project
• 2 cd project
• 3 yarn add @mui/material @emotion/react @emotion/styled
• 4 yarn start

Укажите порядок действий при добавлении Tailwind в проект.

Тип ответа: Сортировка

• 1 инициализируем проект
• 2 добавляем в проект пакет tailwindcss
• 3 создаем конфигурацию проекта
• 4 устанавливаем пути к файлам где будем использовать
• 5 В src/input.css добавляем базовые директивы
• 6 Запускаем процесс сборки с подпиской на изменения

Укажите порядок действий при создании компонента кнопки с MUI.

Тип ответа: Сортировка

• 1 Импортируйте Button компонент из Material-UI: import Button from '@mui/material/Button'
• 2 Создайте экземпляр Button компонента: ˂Button˃Кнопка˂/Button˃
• 3 Настройте свойства кнопки, такие как цвет, размер, тип содержимого и т.д. ˂Button color="primary" variant="contained" size="large"˃Кнопка˂/Button˃
• 4 При необходимости добавьте обработчик событий, например, onClick: ˂Button onClick={(event) =˃ {console.log('Вы нажали на кнопку')}}˃Кнопка˂/Button˃

Укажите порядок действий при создании селекта (компонента с выпадающим списком) кнопки с MUI.

Тип ответа: Сортировка

• 1 Инициализировать компонент ˂Select˃ из MUI: import Select from '@mui/material/Select';
• 2 Создать экземпляр этого компонента с использованием JSX. Например: ˂Select defaultValue="None" /˃
• 3 При необходимости настроить параметры компонента, такие как доступные опции, стиль и т. д.
• 4 Добавить обработчик события изменения значения селекта, если это необходимо. Например: onChange={handleChange}.

Укажите порядок, в котором выполняются консольные команды при инициализации проекта c JSS.

Тип ответа: Сортировка

• 1 npx create-react-app my-app
• 2 cd my-app
• 3 yarn add react-jss
• 4 yarn start

Укажите порядок, в котором выполняются консольные команды при инициализации проекта.

Тип ответа: Сортировка

• 1 npx create-react-app my-app
• 2 cd my-app
• 3 yarn add ˂необходимые пакеты˃
• 4 yarn start

Укажите порядок, в котором стоит расположить импорты в корневой CSS файл.

Тип ответа: Сортировка

• 1 @config “./tailwind.admin.config.js”
• 2 @import “tailwindcss/base”  @import “tailwindcss/components”  @import “tailwindcss/utilities”
• 3 @import “./custom-base.css”  @import “./custom-components.css”  @import “./custom-utilities.css”

Укажите служебные классы в порядке увеличения сдвига по оси X (от наименьшего по модулю к наибольшему)

Тип ответа: Сортировка

• 1 translate-x-0
• 2 translate-x-px
• 3 translate-x-0.5
• 4 translate-x-1
• 5 translate-x-1.5

Установите соответсвие с понятиями из React и их значениями

Тип ответа: Сопоставление

• A. процесс отображения списка данных в пользовательском интерфейсе с использованием компонентов React.
• B. позволяет рендерить различные компоненты или фрагменты кода в зависимости от выполнения определенного условия.
• C. механизм передачи данных (атрибутов) от одного компонента к другому.
• D. используются для определения уникальности элементов в списке.
• E. lists rendering
• F. conditional rendering
• G. props
• H. keys

Установите соответствие между директивой Tailwind и ее предназначением.

Тип ответа: Сопоставление

• A. Подключает дополнительные классы для вариантов служебных утилит (наведение, фокус, темный режим и тд.).
• B. Подключает служебные классы Tailwind и любые служебные классы, зарегистрированные подключенными к проекту плагинами.
• C. Подключает базовые классы компонентов Tailwind и любые классы компонентов, зарегистрированные подключенными к проекту плагинами.
• D. Подключает базовые стили Tailwind и любые базовые стили, зарегистрированные подключенными к проекту плагинами.
• E. @tailwind variants
• F. @tailwind utilities
• G. @tailwind components
• H. @tailwind base

Установите соответствие между компонентом дизайн системы MUI и группой, к которой авторы документации относят этот компонент

Тип ответа: Сопоставление

• A. Box
• B. Tabs
• C. Avatar
• D. Text Field
• E. Layout
• F. Navigation
• G. Data display
• H. Inputs

Установите соответствие между названиями плагинов Tailwind и функциями, которые они выполняют

Тип ответа: Сопоставление

• A. добавляет новые варианты размеров, которые позволяют вам стилизовать элемент на основе размеров родителя, отмеченного специальным образом.
• B. добавляет набор классов, которые можно использовать для быстрого добавления разумных типографских стилей к блокам контента, которые поступают из таких источников, как маркдаун или база данных CMS.
• C. добавляет упорядоченный уровень сброса формы, который упрощает стилизацию элементов формы с помощью классов утилит.
• D. является альтернативой встроенной поддержке aspect-ratio, которая работает в старых браузерах, и добавляет классы , которые могут дать элементу фиксированное соотношение сторон.
• E. container-queries
• F. typography
• G. forms
• H. aspect-ratio

Установите соответствие служебных классов Tailwind и CSS свойств.

Тип ответа: Сопоставление

• A. text-overflow
• B. word-break
• C. letter-spacing
• D. line-height
• E. text-ellipsis
• F. break-keep
• G. tracking
• H. leading

Установите соответствие условных обозначений размера и реального размера в плагине @tailwindcss/container-queries.

Тип ответа: Сопоставление

• A. @container (min-width: 48rem /* 768px */)
• B. @container (min-width: 36rem /* 576px */)
• C. @container (min-width: 20rem /* 320px */)
• D. @container (min-width: 24rem /* 384px */)
• E. @3xl
• F. @xl
• G. @xs
• H. @sm

Что значит “низкоуровневый” в контексте Tailwind?

Тип ответа: Одиночный выбор • с выбором одного правильного ответа из нескольких предложенных вариантов

• Низкоуровневый означает, что Tailwind используется для создания только больших элементов.
• Низкоуровневый означает, что Tailwind предназначен для работы на низком уровне.
• Низкоуровневый означает, что Tailwind состоит из простейших компонентов и классов.
• Низкоуровневый означает, что Tailwind является плохим фреймворком CSS.

Что используется для создания блочных элементов в CSS?

Тип ответа: Текcтовый ответ

Что такое переход в CSS/Tailwind?

Тип ответа: Одиночный выбор • с выбором одного правильного ответа из нескольких предложенных вариантов

• Переход в CSS/Tailwind - это изменение свойства CSS, которое происходит автоматически при изменении значения свойства.
• Переход в CSS/Tailwind - это механизм анимации, который позволяет анимировать изменение свойств CSS.
• Переход в CSS/Tailwind - это процесс, при котором одно состояние элемента сменяется другим.
• Переход в CSS/Tailwind - это свойство, которое определяет, как быстро происходит изменение свойства.

Чтобы переопределить стандартную палитру Tailwind, не расширяя ее, необходимо использовать этот объект. Напишите полный путь до него в конфигурации, начиная с theme.

Тип ответа: Текcтовый ответ

CustomButton и CustomFormButton - стилизованные компоненты в React проекте со styled-components. Что означает const CustomFormButton = styled(CustomButton)`...`

Тип ответа: Одиночный выбор • с выбором одного правильного ответа из нескольких предложенных вариантов

• CustomButton наследует стили из CustomFormButton
• CustomFormButton наследует стили из CustomButton
• Создается стилизованный компонент кнопки CustomFormButton на основе button
• Создается стилизованный компонент кнопки CustomButton на основе button

Styled components это

Тип ответа: Одиночный выбор • с выбором одного правильного ответа из нескольких предложенных вариантов

• плагин для Tailwind
• библиотека для React
• CSS фреймворк
• CSS препроцессор