# Overriding Styles

You can adjust the styling of your theme in 3 different ways:

* [**Overriding the Base Styles**](#overriding-the-base-styles): The ScandiPWA theme includes a set of stylesheets in `app/style` that define the main look of the application. These define global settings, such as SCSS variables (`style/abstract/_variables.scss`), media query definitions (`style/abstract/_media.scss`), base styling for some HTML elements (`style/base`), CMS content styling (`style/cms`), and more. If you want to make global styling changes to these files, you can override them.
* [**Replacing a Component's Styles**](#replacing-a-components-styles): Every component (and route) includes an associated stylesheet, named `<component>.style.scss`. If you wish to completely change the look of a component, you can replace these styles with your own.
* [**Partially Overriding a Component's Styles**](#partially-overriding-a-components-styles): You can choose to keep the existing component's styles instead, and override some of them.

## Overriding the Base Styles

The base styles are defined in the `styles` directory, and imported in `styles/main.scss`. In order to override a base style file, you need to copy over the chain of files that is used to import it.

For example, suppose we want to change the main theme color to an ocean blue. The primary color is defined in `style/abstract/_variables.scss`. Copy over this file to avoid missing any variables, and make the desired changes:

{% code title="override: style/abstract/\_variables.scss" %}

```css
$white: #fff;
$black: #0a0a0a;
$default-primary-base-color: #2387f2; // changed the color here
$default-primary-dark-color: #1259d4; // and here
$default-primary-light-color: #42bdf7; // and here!
$default-secondary-base-color: #eee;
$default-secondary-dark-color: #929292;
$default-secondary-light-color: #f8f8f8;
$font-muli: 'Muli', sans-serif;
$font-standard-size: 12px;
$font-mobile-size: 14px;
```

{% endcode %}

We also need to copy over the file that imports `_variables.scss` for the override to work. By inspecting the styling files, we can see that `style/abstract/_variables.scss` is imported in `style/abstract/_abstract.scss`, which is itself imported directly from `style/main.scss`. Hence, we need to copy over `_abstract.scss` and `main.scss` to their respective directories in our theme.

We can check that the theme's primary color has been successfully overridden:

![](https://4029840077-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MNcGSsOTtbcSNK-Y1U1%2F-MNcO1kp0oKfjfz7Wwyg%2F-MNcRj_gBjkcKtmfaDnO%2Fnew-primary-color.png?alt=media\&token=40f3912a-4e20-4e95-9231-1e77f817fcd0)

## Replacing a Component's Styles

Sometimes you may want to completely restyle a component, ignoring all original styles. For example, suppose we want to create an entirely new design for the `CategoryPaginationLink` component. All we need to do is create a stylesheet with the same path as the stylesheet from the parent theme we want to override. In this case, create a file in `component/CategoryPaginationLink/CategoryPaginationLink.style.scss` with the following contents:

{% code title="override: component/CategoryPaginationLink/CategoryPaginationLink.style.scss" %}

```css
:root{
    --category-pagination-link-size: 50px;
    --category-pagination-link-text-size: 30px;
}

.CategoryPaginationLink {
    // configure layout and center text
    display: block;
    text-align: center;
    size: var(--category-pagination-link-text-size);
    line-height: var(--category-pagination-link-size);

    // set a circular shape with border-radius
    width: var(--category-pagination-link-size);
    height: var(--category-pagination-link-size);
    margin: 6px;
    border-radius: var(--category-pagination-link-size);

    // white text on a blue background
    background: var(--primary-base-color);
    color: #fff;

    // indicate hover/active state
    transition: opacity 100ms ease-out;
    opacity: 0.7;

    &:hover,
    &:focus,
    &_isCurrent {
        opacity: 1;
    }
}
```

{% endcode %}

With this override, any import of the `CategoryPaginationLink` stylesheet will resolve to our custom file. Hence, our stylesheet will be the one to be included in the final CSS file, resulting in this look:

![](https://4029840077-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MNcGSsOTtbcSNK-Y1U1%2F-MNcO1kp0oKfjfz7Wwyg%2F-MNcRokCUsrgMCyUALqH%2Fnew-pagination.png?alt=media\&token=63f1d6fe-37f2-4953-99e2-73984d72f177)

## Partially Overriding a Component's Styles

In some situations, you might want to keep the overall look of a component but change some minor aspect of it's styling. In such cases, it would be undesirable to copy the original stylesheet just to change a few lines of SCSS rules. ScandiPWA suggests a better approach: keeping the original stylesheet and creating an additional stylesheet that overrides some of the default styles.

Consider an example where we want to change the style of the heading of `MyAccountOverlay` - we want to make the text "Sign in to your account" italic.

First, we can define the styles we want to change. We can't keep the original name of the file, because then we will override it completely as shown in the previous section. The naming convention for partially overriding stylesheet files in ScandiPWA is to add `.override` to the file name:

{% code title="override: component/MyAccountOverlay/MyAccountOverlay.override.style.scss" %}

```css
.MyAccountOverlay {
    &-Heading {
        font-style: italic;
    }
}
```

{% endcode %}

The styles we want to override are defined, but they will not be included in the CSS requested by the browser unless we import them somewhere. Styles in ScandiPWA are typically imported from the `.component` file, so override the `.component` file of `MyAccountOverlay`, by creating a file matching the original component file. We don't need to change any of the exported classes or components, so we can leave the existing exports unchanged, but we do need to add an additional import - our overridden styles:

{% code title="override: component/MyAccountOverlay/MyAccountOverlay.component.js" %}

```jsx
// import the original component so that base styles are applied first
import 'SourceComponent/MyAccountOverlay/MyAccountOverlay.component';
// import our modified styles to override some of the default ones
import './MyAccountOverlay.override.style.scss';

// re-export all the original exports from the parent theme untouched
export * from 'SourceComponent/MyAccountOverlay/MyAccountOverlay.component';
export { default } from 'SourceComponent/MyAccountOverlay/MyAccountOverlay.component';
```

{% endcode %}

Now, we can verify that the new CSS rules have overridden some of the default ones, and the title is in italics:

![](https://4029840077-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MNcGSsOTtbcSNK-Y1U1%2F-MNcO1kp0oKfjfz7Wwyg%2F-MNcRuaPJiD638Pe9CYI%2Faccount-italic-title.png?alt=media\&token=36ff975d-776a-464b-b6e2-3030df01e3da)