Overriding a Components Styles

Give a fresh new look to any component – replace the default styles with your own.

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:

src/component/ProductAttributes/ProductAttributes.style.scss

: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)
    }
}

Result: a brand new look for the attributes component!