How To Style React Widgets

How To Style React Widgets#

This page provides an overview of how to style React custom widgets using Squirro Storybook and the Emotion library.

Quick Summary#

To style React custom widgets, perform the following steps:

  1. Locate your widget or component on Squirro Storybook.

  2. Use Control to set the widget or component properties to achieve your desired look and functionality.

  3. Use the Inspector Tool to identify components requiring styling.

  4. Create your custom widget JavaScript file in the Squirro Widget Editor.

  5. In your new file, override the styles of the original component.

  6. In the main.js file, reference your new component in the overrides object.

Locate Your Widget or Component on Squirro Storybook#

All Squirro React widgets and component styling information can be found on Squirro Storybook.

Locate the custom widget or component you plan to customize or browse available widgets and components to find the best base for your custom widget or component.

The left navigation menu shows all available elements grouped in the following categories:

  • Widgets

  • Components

  • MUI Modifications

Squirro Storybook Homepage

Using Controls to Set Widget or Component Properties#

Once you’ve identified your widget or component, modify its properties to match your project configuration as needed.

To do so:

  1. Click the widget or component name in the left navigation menu.

  2. Change parameters within Controls as needed to match your project configuration.

Squirro Storybook Controls

Determining Elements Requiring Styling Using the Inspector#

After modifying the widget or component properties, you can use the Inspector to identify the components requiring styling.

Squirro Storybook Controls

Creating a Custom Widget File in the Squirro Widget Editor#

Once you’ve identified the components requiring styling, you can create your custom widget .js file in the Squirro Widget Editor.

To do so, follow the steps below:

  1. Open your Squirro project.

  2. Navigate to Setup > Visualization.

  3. Click Custom Widgets in the left menu.

  4. Click the Plus Icon to create a new widget.

  5. Click the last tab, React.

  6. Click your widget type.

  7. Enter the widget information and click Next.

  8. Click New File in the bottom left corner.

  9. Enter the filename (including .js) and click Next.

Squirro Storybook Controls

Overriding the Styles of the Original Component#

Inside your new custom file, you can now override the components you previously identified in Storybook.

You can style your components using the styled variable available in the global context.

For more details on styling React widgets, see Styling React Components.

Referencing Your New Custom File in Main.js#

Once you’ve created your custom file, you can reference it in the overrides object.

Once saved, the styling will be active within your project.

Contents