1. Developer Tutorials
  2. Updating the look and feel of app screens

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. Make sure you have already set up your Git repo for app development.

Change styles in main app styles object ( global object )

The global object contains a lot of styles for the app that is 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

Questions?

We're always happy to help with questions you might have! Search our documentation, contact support, or connect with our sales team.