AppRoot
In order to have all the providers in place for rendering overlays, applying
global styles or internationalization, you need to wrap your app in the
AppRoot
. If you're using the dt-app
to create your app, this is
automatically taken care of and you can start working on your app without
further ado.
Import
import { AppRoot } from '@dynatrace/strato-components/core';
Use cases
The AppRoot
takes care of detecting the users preferred color scheme depending
on the preferred theme you have set in your Dynatrace account. By default, we
are using the preferred color scheme you have set in your browser or OS. The
design tokens are set accordingly to render the corresponding theme.
For localization, the AppRoot
also detects the current language the same way
it is detecting the preferred color scheme. The resulting language is then used
to translate the text on the page, using English as fallback if the language is
not supported.
The AppRoot
component is automatically added in the main.tsx
file of your
app when creating the app with the Dynatrace App Toolkit.
import React from 'react';
import { AppRoot } from '@dynatrace/strato-components/core';
export const App = () => <AppRoot>App Root Content</AppRoot>;