Стилизация

Вы можете настроить внешний вид компонентов редактора, применяя определённые стили.

Назначение CSS-класса для контейнера редактора

import { Editor } from "@svar-ui/react-editor";
import "@svar-ui/react-editor/all.css";

function App() {
  return <Editor css="myBox" />;
}

Эта функция позволяет назначить CSS-класс главному контейнерному элементу редактора. Атрибут css используется для применения пользовательских стилей к блоку редактора, что даёт разработчикам возможность изменять его визуальное оформление в соответствии с темой или макетом приложения.

В этом примере CSS-класс myBox должен быть заранее определён в таблице стилей. Это удобно, когда редактор должен соответствовать окружающим элементам интерфейса или иметь особые визуальные характеристики — например, определённые отступы, границы или цвет фона.

Отключение шрифтов

Если вам нужно отключить шрифты, используемые в теме, задайте свойству fonts темы значение false:

import { Willow } from "@svar-ui/react-core";
import { Editor } from "@svar-ui/react-editor";
import "@svar-ui/react-editor/all.css";

function App() {
  return (
    <div style={{ width: 300 }}>
      <Willow fonts={false}>
        <Editor />
      </Willow>
    </div>
  );
}

Обратите внимание

Если вы отключаете шрифты по умолчанию, вам потребуется самостоятельно подключить нужные шрифты.

Связанные статьи: Визуальные темы