Overriding Styles

You can adjust the styling of your theme in 3 different ways:

• Overriding the Base Styles: The ScandiPWA theme includes a set of stylesheets in app/style that define the main look of the application. These define global settings, such as SCSS variables (style/abstract/_variables.scss), media query definitions (style/abstract/_media.scss), base styling for some HTML elements (style/base), CMS content styling (style/cms), and more. If you want to make global styling changes to these files, you can override them.

• Replacing a Component's Styles: Every component (and route) includes an associated stylesheet, named <component>.style.scss. If you wish to completely change the look of a component, you can replace these styles with your own.

• Partially Overriding a Component's Styles: You can choose to keep the existing component's styles instead, and override some of them.

Overriding the Base Styles

The base styles are defined in the styles directory, and imported in styles/main.scss. In order to override a base style file, you need to copy over the chain of files that is used to import it.

For example, suppose we want to change the main theme color to an ocean blue. The primary color is defined in style/abstract/_variables.scss. Copy over this file to avoid missing any variables, and make the desired changes:

override: style/abstract/_variables.scss

$white: #fff;
$black: #0a0a0a;
$default-primary-base-color: #2387f2; // changed the color here
$default-primary-dark-color: #1259d4; // and here
$default-primary-light-color: #42bdf7; // and here!
$default-secondary-base-color: #eee;
$default-secondary-dark-color: #929292;
$default-secondary-light-color: #f8f8f8;
$font-muli: 'Muli', sans-serif;
$font-standard-size: 12px;
$font-mobile-size: 14px;

We also need to copy over the file that imports _variables.scss for the override to work. By inspecting the styling files, we can see that style/abstract/_variables.scss is imported in style/abstract/_abstract.scss, which is itself imported directly from style/main.scss. Hence, we need to copy over _abstract.scss and main.scss to their respective directories in our theme.

We can check that the theme's primary color has been successfully overridden:

Replacing a Component's Styles

Sometimes you may want to completely restyle a component, ignoring all original styles. For example, suppose we want to create an entirely new design for the CategoryPaginationLink component. All we need to do is create a stylesheet with the same path as the stylesheet from the parent theme we want to override. In this case, create a file in component/CategoryPaginationLink/CategoryPaginationLink.style.scss with the following contents:

override: component/CategoryPaginationLink/CategoryPaginationLink.style.scss

:root{
    --category-pagination-link-size: 50px;
    --category-pagination-link-text-size: 30px;
}

.CategoryPaginationLink {
    // configure layout and center text
    display: block;
    text-align: center;
    size: var(--category-pagination-link-text-size);
    line-height: var(--category-pagination-link-size);

    // set a circular shape with border-radius
    width: var(--category-pagination-link-size);
    height: var(--category-pagination-link-size);
    margin: 6px;
    border-radius: var(--category-pagination-link-size);

    // white text on a blue background
    background: var(--primary-base-color);
    color: #fff;

    // indicate hover/active state
    transition: opacity 100ms ease-out;
    opacity: 0.7;

    &:hover,
    &:focus,
    &_isCurrent {
        opacity: 1;
    }
}

With this override, any import of the CategoryPaginationLink stylesheet will resolve to our custom file. Hence, our stylesheet will be the one to be included in the final CSS file, resulting in this look:

Partially Overriding a Component's Styles

In some situations, you might want to keep the overall look of a component but change some minor aspect of it's styling. In such cases, it would be undesirable to copy the original stylesheet just to change a few lines of SCSS rules. ScandiPWA suggests a better approach: keeping the original stylesheet and creating an additional stylesheet that overrides some of the default styles.

Consider an example where we want to change the style of the heading of MyAccountOverlay - we want to make the text "Sign in to your account" italic.

First, we can define the styles we want to change. We can't keep the original name of the file, because then we will override it completely as shown in the previous section. The naming convention for partially overriding stylesheet files in ScandiPWA is to add .override to the file name:

override: component/MyAccountOverlay/MyAccountOverlay.override.style.scss

.MyAccountOverlay {
    &-Heading {
        font-style: italic;
    }
}

The styles we want to override are defined, but they will not be included in the CSS requested by the browser unless we import them somewhere. Styles in ScandiPWA are typically imported from the .component file, so override the .component file of MyAccountOverlay, by creating a file matching the original component file. We don't need to change any of the exported classes or components, so we can leave the existing exports unchanged, but we do need to add an additional import - our overridden styles:

override: component/MyAccountOverlay/MyAccountOverlay.component.js

// import the original component so that base styles are applied first
import 'SourceComponent/MyAccountOverlay/MyAccountOverlay.component';
// import our modified styles to override some of the default ones
import './MyAccountOverlay.override.style.scss';

// re-export all the original exports from the parent theme untouched
export * from 'SourceComponent/MyAccountOverlay/MyAccountOverlay.component';
export { default } from 'SourceComponent/MyAccountOverlay/MyAccountOverlay.component';

Now, we can verify that the new CSS rules have overridden some of the default ones, and the title is in italics: