app/stylethat 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.
<component>.style.scss. If you wish to completely change the look of a component, you can replace these styles with your own.
stylesdirectory, 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.
style/abstract/_variables.scss. Copy over this file to avoid missing any variables, and make the desired changes:
_variables.scssfor the override to work. By inspecting the styling files, we can see that
style/abstract/_variables.scssis imported in
style/abstract/_abstract.scss, which is itself imported directly from
style/main.scss. Hence, we need to copy over
main.scssto their respective directories in our theme.
CategoryPaginationLinkcomponent. 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.scsswith the following contents:
CategoryPaginationLinkstylesheet 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:
MyAccountOverlay- we want to make the text "Sign in to your account" italic.
.overrideto the file name:
.componentfile, so override the
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: