Updating the look and feel of app screens

In this tutorial, you will learn how to update the look and feel of your app screens on top of the various options already available in the Branding section of the plugin.

Change styles in main app styles object ( global object )

The global object contains a lot of styles for the app that are being passed on to many components. It is important to note that a lot of these components override this object and may cause some of the style properties that you are trying to apply to not work. But in most cases it will work, and it will be done with the help of this hook: cssApi.addGlobalStyle, which allows you to override existing styles or add new ones.

Here is an example:

// index.js
...
	externalCodeSetup.cssApi.addGlobalStyle("container", {
		backgroundColor: "white"
	});

To learn more about how “global” is made and its content, please refer to this link: Global CSS Styles