css

Вообще для стилизации этой области можно использовать notchedOutline

НО: если у вас возникли проблемы с гранцей -- border-ом, который скажем имеет пробел (избыточное расстоние) до или после надписи (label), то проблема может быть просто в размере шрифта, наследуюемомго из .MuiOutlinedInput-root -- имеено этот размер наследуется для текста в legend.

Чтобы убрать полосы прокрутки, нам нужно чтобы как минимум:

• 1) Родитель сам умещался в текущий размер (напр. ширина в 100%)
• 2) На родителе стояло свойство overflow: hidden

При этом в нашем случае потомок позиционирован абосолютно, далее рассмотрим пример и решение

Как было (не работает, проявляется полоса прокрутки):

HTML:

    
<div className='some-parent'>
    <div className={'absolute-child'}>Need no scroll!</div>    
 </div>

CSS:

Используйте свойство align-content: https://developer.mozilla.org/ru/docs/We...

Свойсто align-content работает когда флекс-контейнер содержит переносы списка элементов (получаются строки или колонки, в засимости от значения flex-direction вашего флекс-контейнера), чтобы руководить расстоянием между этими строками-колонками свойство и помогает

Напр. убираем отступ между колонками:

Или так:

div:not(:first-child)

Или так:

div:nth-child(n + 2) 

• Всё о магии отступов в CSS Flexbox: https://medium.com/@stasonmars/%D0%B2%D1...

Пишут, что да - файл пересобирается из less файлов "каждый раз", поэтому править его бессмысленно:

• для пользовательских стилей надо использовать style.css,
• а если вы хотите исправить существующие в main-styles.css правила, то правьте .less файлы, чтобы внести изменения (например, многие правила определены в style.less).

Пересборка main-styles.css происходит либо при правке .less -файлов из которых он собирается, либо при сохранении раздела Cherry Settings (Настройки Cherry) из админки.

Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleNotFoundError: Module not found: Error: Can't resolve '...'

Чтобы использовать svg в css файле, просто укажите правильный относительный путь, например:

.login-page .bg_center_dot {
    position: absolute;
    top: 26.6927%;
    left: 72.2689%;
    width: 3.3613%;
    height: 50%;
    background: url(../images/bg-center-dot.svg) no-repeat 50% 0;
    background-size: 100% auto
}

Основное:

• Официальный сайт: https://getuikit.com/
• Примеры шаблонов для uikit 3: https://github.com/zzseba78/Kick-Off

Остальные пример см. по ссылкам ниже.