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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.scandipwa.com/tutorials/customizing-your-theme/styling/partially-extending-a-components-styles.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.