Style Hirarchy

Style Hirarchy of ReactUI

The different layers (in this order!) of the ReactUI are:

1. Base/Core
2. Components
3. Themes
4. Schemes

Order when using ReactUI as a library

When using the ReactUI as a library the first two layers mentioned above are bundled into a file called "main.css" it is advised to import this file first into your index.js/tsx file like I did in this project.

1. Base/Core

The Base is the deepest layer of our hirarchy and is the first one to get overwritten. It's used as general styling, positioning and displaying. As we are using PrimeReact components (menus, tables, editors etc.), we are using one of their themes as a base for our component styling. We are using the "Saga Blue" theme. The different themes can be found at the PrimeReact Website.

Changing the Base

If you do not like the PrimeReact theme we have chosen, you are able to change it, but only if you use the ReactUI directly and not as a library.

• Go to the index.scss
• Change the first PrimeReact import to the theme you like.

Example:

//@import '~primereact/resources/themes/saga-blue/theme.css';
@import '~primereact/resources/themes/luna-green/theme.css';

2. Components

This is the layer which gets imported after the PrimeReact theme so it will overwrite it. For most components there is a scss files which overwrites some of the properties set of the theme or adds new ones.

Changing the Components Style

If you want to change the components style there are two ways depending on if you use the ReactUI as library or not.

2.1. Using ReactUI directly

If you use the ReactUI directly, you can simply go into the scss file of the component you'd like to change and change the scss/css rule there. But you should first check out if the rule is not overwritten by a layer above or it will not work.

2.2. Using ReactUI as a Library

If you use the ReactUI as a library, you should first check out which selector is being used, for the style you want to change in the dev console. Then you can change the style in your project's own css/scss file.

3. Themes

The themes are used to set the component sizes mostly by changing their paddings/margins sometimes also width and height properties. They overwrite the base's sizes.

4. Color-Schemes

The color-schemes are used to edit the components backgrounds, text-colors, borders etc. everything which has to do with colors. It overwrites the base's colors.

Using your own theme/color-scheme

How to use your own color-schme/theme can be found here

Example URL: http://localhost:3000/?language=de&appName=vxdemo&colorScheme=dark&theme=basti&design=themeABC&baseUrl=http%3A%2F%2Flocalhost%3A80%2Fservices%2Fmobile/#