# 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 in the [Squirro Storybook](../storybook.md#react-storybook) page. 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 [](https://s3.amazonaws.com/download.squirro.net/docs/technical/widgets/squirro-story.png) ## 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. [](https://s3.amazonaws.com/download.squirro.net/docs/technical/widgets/story-controls.png) ## 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. [](https://s3.amazonaws.com/download.squirro.net/docs/technical/widgets/storybook-inspector.png) ## 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**. [](https://s3.amazonaws.com/download.squirro.net/docs/technical/widgets/new-file.png) ## 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](../style.md#react-style). ## 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.