> 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/overriding-a-components-styles.md).

# 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!](/files/-MciaMuMVAuukdTkGarv)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.