Modify Spire CSS widget styles

3 min

This example shows how to modify the styles of the ProductPrice component, which is used throughout the site.

This uses style extension objects in Spire.

This uses styled-components to specify CSS rules.

This solution is ideal if you need to customize the style of a widget and:

The Mobius component does not provide a prop to modify that style or.

The CSS rules are complex.

This example uses the VS Code IDE for modifying the widget styles.

📘 Spire CSS styles Spire lets you pass CSS styles to specific child widgets by adding a React Context Provider and Hook to additionalStyles.tsx.

The widgets with this ability include Banner, Button, Image, Link, LinkList, Logo, NavigationList, Quick Order, Rich Content, Slideshow, SocialLinks, Subscribe, SecondaryNavigation, HeaderLinkList, HeaderSearchInput, Header/MainNavigation, HeaderSignIn, HeaderShipToAddress, CurrencyMenu, and LanguageMenu.

Prerequisite

You have created a custom blueprint.

Steps

Open your IDE.

Open the ~/src/FrontEnd directory from the InsiteCommerce repository.

Find the WidgetExtensions directory in your custom blueprint directory (such as ~/FrontEnd/modules/blueprints/myCustomBlueprint/src/WidgetExtensions).

Create a file named CommonComponentsExtensions.ts. The name does not matter. This file is used for components across the storefront.

Add the following code to the CommonComponentsExtensions.ts file.

import {productPriceStyles} from "@insite/content-library/Components/ProductPrice";
import {css} from "styled-components";
import mergeToNew from "@insite/client-framework/Common/mergeToNew";

/* Note: Modifying the styles this way will affect all instances of the widget across the Storefront.
   Each component and widget in Spire exports a base style exensions object.
  
   You can import this object and modify the properties on it. This will affect
   all instances of the component or widget across the Storefront. In this example,
   the style extensions object is named "productPriceStyles".
  
   The `mergeToNew` function uses lodash's `_.merge()` behind the scenes
   to make deep merging two objects easier. You can also do this manually
   using the JavaScript spread (...) operator.
*/

productPriceStyles.wrapper=mergeToNew(productPriceStyles.wrapper,{
   /* This is using the `css` utility function provided by styled-components.
   
      You should extend the base widget or component CSS rules when you add new CSS rules.
    
      Note: You should NOT use CSS selectors to apply CSS rules. 
      Each of the Mobius components used by widgets in Spire makes use of 
      the style extension objects. This allows you to target a specific element within a widget 
      to apply styles.
   */ 
    css: css`
        ___CSS_0___
        text-align: right;`,});

Save the file.

Run Spire using your custom blueprint. Below is an example of starting Spire from the terminal. You may also do this from your IDE. Spire includes some default VS Code launch configurations. npm run start myCustomBlueprint 3000

Go to the storefront. The storefront URL is <http://localhost:3000>. Use the port number used to run Spire.

Go to a Product Detail page and the Product List page and verify the changes.