Extending a Component's Styles

Tailor the details to your needs – make small adjustments while keeping the original styles

In the last chapter, we learned about overriding a component's styles. We did this by replacing the original styles with our own. However, in some cases, you may want to keep the original styles, and only make a few modifications. To avoid duplicating all of the original code, you can extend the styles by creating a file that will be used in addition to the base stylesheet.

For example, suppose you want to add a shadow to the menu overlay. To do this, we will only need to add a few lines of SCSS code – which means we want to keep most of the existing styling. This is easy to do – we simply need to extend the styles for the Menu component.

First, create a new stylesheet file:

src/component/Menu/Menu.override.style.scss

.Menu {
    &-SubCategoriesWrapper {
        opacity: 0.95;
        box-shadow: rgba(0, 24, 49, 0.8) 0 30px 80px;
    }

    &-Overlay {
        display: none;
    }
}

Now, to include this file in the application (in addition to the existing styles), override the .component and import the .override.style:

src/component/Menu/Menu.component.js

import {
    Menu as SourceMenu
} from 'SourceComponent/Menu/Menu.component';

import './Menu.override.style';

export default SourceMenu;

Note that the .component override doesn't make any changes – it simply re-exports the original component and imports an additional stylesheet.

Note: you can use the scandipwa CLI utility to quickly override components. In this case, we can easily create the files we need with the following command:

scandipwa override component Menu
? Choose things to extend in Menu.component.js Menu
? What would you like to do with styles? Extend
? Choose things to extend in Menu.config.js 
? Choose things to extend in Menu.container.js 

NOTE!

     The following files have been created:
     src/component/Menu/Menu.override.style.scss
     src/component/Menu/Menu.component.js

Now, we have added a shadow and a transparency effect to the menu overlay: