Темы React Spreadsheet

React Spreadsheet поставляется с четырьмя встроенными темами и поддерживает пользовательские темы через CSS-переменные. Используйте проп theme, чтобы выбрать встроенную тему или применить собственную.

Встроенные темы

Тип SpreadsheetTheme определяет четыре встроенные темы:

• "light" (по умолчанию)
• "dark"
• "contrast-light"
• "contrast-dark"

Также можно передать строку с именем пользовательской темы.

Применение темы

Передайте проп theme компоненту ReactSpreadsheet с именем нужной темы:

<ReactSpreadsheet sheets={sheets} theme="dark" />

Переключение во время работы

Используйте состояние React для динамического переключения тем:

import { useState } from "react";
import { ReactSpreadsheet, type SheetData, type SpreadsheetTheme } from "@dhtmlx/trial-react-spreadsheet";
import "@dhtmlx/trial-react-spreadsheet/spreadsheet.react.css";

function App() {
    const [sheets] = useState<SheetData[]>([/* ... */]);
    const [theme, setTheme] = useState<SpreadsheetTheme>("light");

    return (
        <>
            <select onChange={(e) => setTheme(e.target.value as SpreadsheetTheme)}>
                <option value="light">Light</option>
                <option value="dark">Dark</option>
                <option value="contrast-light">Contrast Light</option>
                <option value="contrast-dark">Contrast Dark</option>
            </select>

            <ReactSpreadsheet sheets={sheets} theme={theme} />
        </>
    );
}

Пользовательские CSS-переменные

DHTMLX Spreadsheet использует многоуровневую систему CSS-переменных. Вы можете переопределить эти переменные, чтобы настроить внешний вид за пределами встроенных тем.

Создание пользовательской темы

Определите пользовательский селектор data-dhx-theme, переопределите нужные переменные и передайте имя темы как проп:

src/custom-theme.css

[data-dhx-theme='corporate'] {
    /* цветовая схема */
    --dhx-h-primary: 220;
    --dhx-s-primary: 60%;
    --dhx-l-primary: 45%;

    /* панель инструментов и сетка */
    --dhx-s-toolbar-background: #f0f4f8;
    --dhx-s-grid-header-background: #e2e8f0;

    /* цвета диапазонов таблицы */
    --dhx-spreadsheet-range-background-1: #bee3f8;
    --dhx-spreadsheet-range-color-1: #2b6cb0;

    /* keyboard focus outline of the formula bar and the toolbar controls */
    --dhx-spreadsheet-focus-color: #2b6cb0;
}

import "./custom-theme.css";

<ReactSpreadsheet sheets={sheets} theme="corporate" />

Связанные руководства

• Темы - обзор встроенных тем DHTMLX Spreadsheet
• Настройка базовых тем - настройка базовых тем
• Пользовательская тема - создание пользовательских тем