# Extending a Component's 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:

{% code title="src/component/Menu/Menu.override.style.scss" %}

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

    &-Overlay {
        display: none;
    }
}
```

{% endcode %}

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

{% code title="src/component/Menu/Menu.component.js" %}

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

import './Menu.override.style';

export default SourceMenu;
```

{% endcode %}

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

{% hint style="info" %}
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
```

{% endhint %}

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

![](https://4029840077-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MNcGSsOTtbcSNK-Y1U1%2F-McTbr2_1EypZQkAPEhT%2F-McTbuETf8eIs_5VcYve%2FEkr%C4%81natt%C4%93ls%202021-06-18%2013-13-59.png?alt=media\&token=fea80707-98c3-41ad-8551-e0311cd1afb7)