|Any components or nodes that should be impacted by the settings applied by this Configuration component.|
|Context to read previous configuration values from.|
|Override rendering direction of the document. Direction will be based on the locale if now provided.|
|Disables loading Open Sans from Google Fonts. Only takes effect on the root configuration.|
|User locale as defined in BCP-47.|
|Override map to replace Cosmos components.|
|Target element for rendering a |
|Use native HTML5 controls for inputs instead of rich ones.|
|Target element for loading styles related to |
|Theme object used to override any or all Cosmos theme properties.|
|Object with (partial) translations.|
The configuration component is used to provide a variety of useful overrides to your application. You can use the configuration component to wrap you entire application, or you can wrap individual components for specific use cases. The props passed to the configuration component that are detailed below may also be passed in as a configuration object to the context prop.
This documentation only covers a subset of the available props for the configuration component.
The portalTarget prop determines where to render certain components within the DOM tree. This will only affect components that are designed to render within a React Portal, such as Modals, Popovers, and Toasts.
By default, the portalTarget is set to
body, so those components will appear as direct siblings to the
<body/> tag when they are present in the DOM. You can supply any present DOM element to this prop and then components that renders within a React Portal will become a direct sibling to the specified element.
Style sheet target
The styleSheetTarget prop is similar to the portalTarget prop in that it accepts a DOM element. However, this target is utilized by the Styled Components library. This target is referenced by the StyleSheetManager and any component styles will originate from the provided target.
By default, this target is set to
html and thus covers the entirety of the DOM.
The theme prop accepts any JSON file or object that represents a subset of the Cosmos Theme. Every attribute within the Theme can be modified by replicating that attribute's heirachy and providing a custom value.
The translations prop accepts a JSON object of key-value pairs. This object can contain new keys as well as override the values of existing keys.