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: