Interface: MayHaveStyles

Expand

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

Позволяет динамически менять внешний вид элемента.

Remarks

Использование:

• Изменение цвета фона
• Изменение размера и отступов
• Изменение границ и тени
• Изменение шрифта и цвета текста

Формат:

• CSS свойства на camelCase (не kebab-case)
• Значения могут быть строками или числами
• Числовые значения для размеров автоматически приводятся к пикселям

Совместимость:

• Соответствует React.CSSProperties
• Поддерживает все стандартные CSS свойства
• Работает с современными браузерами

Properties

styles?

readonly optional styles: any

Объект с CSS свойствами для применения к элементу.

Remarks

Формат свойств (camelCase):

{
   backgroundColor: '#f0f0f0',  // Правильно (camelCase)
   // background-color: '#f0f0f0'  // Неправильно (kebab-case)

   fontSize: 14,               // Число → 14px
   lineHeight: '1.5',          // Строка → 1.5

   padding: 10,                // Число → 10px
   margin: '5px 10px',         // Строка → 5px 10px

   color: 'red',               // Цвет
   borderRadius: 4             // Число → 4px
}

Example

Изменение фона и текста

{
    id: 'textblock:info',
    content: 'Информационное сообщение',
    styles: {
        backgroundColor: '#fff3cd',   // Светлый жёлтый
        color: '#856404',             // Тёмный коричневый текст
        padding: 15,                  // 15px со всех сторон
        borderRadius: 4,              // Скруглённые углы
        border: '1px solid #ffc107'   // Жёлтая граница
    }
}

Изменение стилей динамически

// Применить стили для ошибки
editorApi.ui.updateUiNodes([{
    id: 'textblock:error',
    content: 'Произошла ошибка!',
    styles: {
        backgroundColor: '#f8d7da',
        color: '#721c24',
        border: '1px solid #f5c6cb'
    }
}]);

// Вернуть нормальные стили
setTimeout(() => {
    editorApi.ui.updateUiNodes([{
        id: 'textblock:error',
        styles: {
            backgroundColor: 'transparent',
            color: 'inherit'
        }
    }]);
}, 3000);

See

React.CSSProperties — полный список поддерживаемых CSS свойств