Overriding Styles
Last updated
Was this helpful?
Last updated
Was this helpful?
You can adjust the styling of your theme in 3 different ways:
: 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.
: 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.
: You can choose to keep the existing component's styles instead, and override some of them.
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:
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:
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:
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:
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:
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:
Now, we can verify that the new CSS rules have overridden some of the default ones, and the title is in italics:
