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.

To import a stylesheet into your theme, you just use a standard JavaScript import call. The best place is to that at the top of your theme configuration file.

import "./style/theme.scss";

This basically imports a file called theme.scss from the style folder into your theme, and into your site reflectively.

The 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.

Last updated on 2019-11-22 by SvenAlHamad