# Overriding a Components Styles

In the first few chapters, we looked at how global styles can be overridden in Scandi. However, for better code organization, individual components have their own styles, too. In this chapter, you will learn to override a component's styles.

Suppose you want to completely re-style an existing component in Scandi. All you need to do is override its `.style.scss` file by creating a new file of the same path, in your theme directory. For example:

```
to override:
    node_modules/@scandipwa/scandipwa/
        src/component/ProductAttributes/ProductAttributes.style.scss
create:
        src/component/ProductAttributes/ProductAttributes.style.scss
```

You can also use the `scandipwa` CLI utility to override styles more easily. Just be sure to select `Override` when asked what to do with styles, and leave the other options un-selected.

```
scandipwa override component ProductAttributes

? Choose things to extend in ProductAttributes.component.js 
? What would you like to do with styles? Override
? Choose things to extend in ProductAttributes.container.js 

NOTE!

     The following files have been created:
     src/component/ProductAttributes/ProductAttributes.style.scss
```

Now, it's time to write some custom styling for the component:

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

```css
:root {
    --product-information-background: var(--secondary-base-color);
}

.ProductAttributes {
    &-Wrapper {
        padding: 0;

        @include desktop {
            padding: 2rem;
        }
    }

    &-ExpandableContentButton {
        @include after-mobile {
            display: none;
        }
    }

    &-ExpandableContentContent {
        &_isContentExpanded {
            @include mobile {
                padding: 0 1.4rem;
            }
        }
    }

    &-Description,
    &-Attributes {
        width: 100%;
    }

    &-Attributes {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap:  1em;
    }

    &-ValueLabel,
    &-AttributeLabel {
        text-overflow: ellipsis;
        font-family: var(--font-staatliches);
        font-size: 20px;
        line-height: 1;
    }

    &-ValueLabel {
        font-weight: 700;
        @include mobile {
            padding-left: .7rem;
            margin-bottom: 1.4rem;
        }
    }

    &-AttributeLabel {
        text-align: right;
        color: var(--secondary-dark-color)
    }
}
```

{% endcode %}

![Result: a brand new look for the attributes component!](https://4029840077-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MNcGSsOTtbcSNK-Y1U1%2F-Mci_9p04c5-5dWWjvMJ%2F-MciaMuMVAuukdTkGarv%2Fimage.png?alt=media\&token=b8aae95c-18ca-4e94-9b68-ba97d4cb2bbe)


---

# 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/overriding-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.