Ne7Le4Der

Добавить в questions-styles.scss

@import "_varieble.scss";

После этого в questions-styles.scss будут доступны переменные из _varieble.scss

UPD: Дока SCSS рекомендует использовать @use вместо @import https://sass-lang.com/documentation/at-rules/import

Для использования use не нужно указывать подчёркивание и расширешие
@use "varieble";
https://sass-lang.com/documentation/at-rules/use

Ну так у вас в вопросе и содержится ответ. На бэке допиливаем возможность (если её нет) получения данных с пагинацей, что-нибудь типо

{
    limit: 100 //Количество элементов на странице,
    page: 5 //Номер страницы
}

И получаем limit записей с отступом limit * page. Решение для таблицы есть.

А по excel файлу вам в комментариях правильно написали, не нужно тащить всё на фронт, генерируйте файл на бэке и отдавайте его

Если вы используете Material UI, то у компонента Pagination есть свойство onChange (https://mui.com/material-ui/react-pagination/). Поставив обработчик на этот метод, вы можете узнать какая сейчас выбрана страница, и вам не нужно обрабатывать клики на страницы или на стрелочки, вам просто отдастся новая страница при изменении. Пример из той же доки (https://codesandbox.io/s/dzqzh1?file=/demo.js)

https://codesandbox.io/s/quizzical-https-2kthou

JSX позволяет вернуть только один блок, т.е.

<div>Первый блок</div>
<div>Второй блок</div>

вы вернуть не сможете. Чтобы не плодить лишние родительские div'ы, существует
<React.Fragment></React.Fragment>
в который можно обернуть несколько блоков и вернуть их. В DOM'е, который вам отрисовывает браузер он никак не отобразится. а запись
<></> - это просто короткая запись фрагмента.

Ну а по факту ответ был дан выше - используйте при необходимости, ничего плохого в этом нет)

useEffect(()=>{
    setModels("");
}, [brand]);

Если я вас правильно понял