Custom UI and @atlaskit/button

[StrautsAiz]

Hi!
I am new to this and tried to go through the Build a custom UI app in Jira and it worked fine. I managed to deploy/install the app and see the results in Jira .

I am unable to include any @atlaskit components (feels like the css is lost, it does not look as it should). Although if I create a separate React project, all the components look good.

This is my code:

import React from 'react';
import Button from '@atlaskit/button';
const App = () => {
  return <Button appearance="primary">Primary button</Button>;
};
export default App;

This is what I got, I was expending to see the blue button (cannot upload more than 1 pic ):

What am I doing wrong?

[nathanwaters]

My guess is you need this: https://developer.atlassian.com/platform/forge/add-content-security-and-egress-controls/#use-custom-content-security-policies

permissions:
  content:
    styles:
      - 'unsafe-inline'

Might also be a good idea to include this in your root app file:

import '@atlaskit/css-reset'

[StrautsAiz]

Perfect! Thank you so much.
unsafe-inline permissions helped.

permissions:
  content:
    styles:
      - 'unsafe-inline'

Now the same code results in this:

Although it sounds amusing that @atlaskit components are unsafe

[nathanwaters]

Wait until you discover that Atlassian has four separate incompatible component libraries: AUI, Atlaskit, UI Kit, UI Kit 2.

Nothing ever makes sense in this ecosystem. I’ve learned to first assume the error lies on Atlassian’s side whenever something doesn’t work, because that’s usually the case.