Styling ​

The Deepdesk SDK's UI is composed of several (React-) components. Each component is composed of one or more html elements or child components.

The components and their html elements are styled by class names and are shipped with a default styles.

The Deepdesk SDK offers a simpel interface which allows you to extend the class names with your own styling.

Each feature (eg. suggestions overlay) can take a custom styles object of which the keys are the component names.

In general each component has a root class and optionally modifier classes in the form of isFoo (eg.: isSelected). A component could also have child element classes, which in turn could contain modifier classes in the form of fooIsBar (eg.: actionButtonIsPrimary).

Input, Search & Dialogs ​

Calling deepdeskSDK.mount(...) will inject the following into the document:

• A input tab completion component.
• The input suggestions overlay component
• Search (or "Command Palette")
• Dialogs overlay component

These styles can be customized.

Widget ​

Calling deepdeskSDK.renderWidget(...) will inject the following into the document:

• A widget component.

These styles can also be customized.

Import default styles ​

There are several ways to include the default styles of the DeepdeskSDK.

Via JS ​

You can import a javascript file which injects the default styles into the head of the document:

// index.js
import "@deepdesk/deepdesk-sdk/styles";

Via CSS ​

You could also import the default styles as a CSS file:

/* my-styles.css */
@import "@deepdesk/deepdesk-sdk/styles.css";

Or, if you want more fine grained control of which css you import:

/* Input styles (TabCompletion and SuggestionsOverlay) */
/* Needed when using deepdesk.mount(...) */
@import "@deepdesk/deepdesk-sdk/input.css";

/* Search & Dialogs styles (eg: Commandpalette) */
/* Needed when using deepdesk.mount(...) */
@import "@deepdesk/deepdesk-sdk/dialogs.css";

/* Widget styles */
/* Needed when using deepdesk.renderWidget(...) */
@import "@deepdesk/deepdesk-sdk/widget.css";

Via CDN ​

All styles:

<link rel="stylesheet" href="https://unpkg.com/@deepdesk/deepdesk-sdk@{version}/styles.css" />

Or, if you want more fine grained control of which css you import:

<!-- Input styles (TabCompletion and SuggestionsOverlay) -->
<link rel="stylesheet" href="https://unpkg.com/@deepdesk/deepdesk-sdk@{version}/input.css" />

<!-- Search & Dialogs styles (eg: Commandpalette) -->
<link rel="stylesheet" href="https://unpkg.com/@deepdesk/deepdesk-sdk@{version}/dialogs.css" />

<!-- Widget styles -->
<link rel="stylesheet" href="https://unpkg.com/@deepdesk/deepdesk-sdk@{version}/widget.css" />