If you've gone through the default theme configuration file you've probably noticed that it's mostly just a list of class names and few references to React components. We didn't talk about any stylesheets so far. Working with stylesheets in Webiny pretty straight forward.
import call. The best place is to that at the top of your theme configuration file.
This basically imports a file called
theme.scss from the
style folder into your theme, and into your site reflectively.
theme.scss is a file that can have any other name, as well as you can import multiple files if required. In the case of the default theme, the
theme.scss file is the root stylesheet which then imports all other stylesheets. This way of doing things just makes everything a bit more tidy.
We encourage you the explore the structure of the
styles folder in the default theme, to get a sense of how styles are structured.
Almost every component in Webiny has it's own class name. You can explore those by viewing the source of your Webiny page. The HTML generated by Page Builder is human readable. All classes starting with
webiny- prefix can be referenced in your stylesheets. This way you have the full control of how the elements will look like visually.