> For the complete documentation index, see [llms.txt](https://docs.scandipwa.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.scandipwa.com/tutorials/customizing-your-theme/styling/partially-extending-a-components-styles.md).

# 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:

![](/files/-McTbuETf8eIs_5VcYve)