UI Kit components usage in Custom UI project

Forge
1

Hi Colleagues,
I’m working now on the simple example of the Forge Custom UI application, which I installed using the appropriate tutorial. During my work, I figured out that using several Atlassian UI Kit 2 components in this Custom UI project will benefit me. I’ve added the appropriate “import { SectionMessage, Text, Badge, xcss } from ‘@forge/react’;” line in App.tsx file, and I even installed @atlaskit/css-reset package and added “link rel=“stylesheet” href=”./…/node_modules/@atlaskit/css-reset/dist/bundle.css" to index.html of my Custom UI application. But it didn’t help me to activate CSS, and as a result, I see only flat text, instead of SectionMessage or Bage component. Can you advise me if there is any way to activate standard CSS for UI Kit Components if the project was initially set up as a Custom UI project?

2

Hi.
Did you add the following lines to your manifest file?

permissions:
  content:
    styles:
      - unsafe-inline
3

Hi @SvenSchneider ,
Yes, I’ve included - unsafe-inline into the manifest as well as added

/// <reference path="./../../node_modules/@types/react/index.d.ts"/>
declare namespace React {
    interface HTMLAttributes<T> extends DOMAttributes<T> {
      css?: any;
      xcss?: any;
    }
  }

Into separate index.d.ts file to enable CSS and XSS to be used with components in TypeScript projects.
In addition, I figured out, that I’ve launched two versions of React in my project - one in backend package.json, and another in static frontend package.json. It led to a kind of “invalid hook invocation” runtime error. So I moved all React dependencies into static frontend package.json and now it works.