CSS to UI Elements in forge UI KIT

Jira Development Jira Server
1

Dear Experts,

I am using Forge & React to implement JIRA APP . I need buttons/actions in single row (just like table) below form & want to apply CSS.

“@forge/api”: “^2.10.0”,
“@forge/ui”: “1.6.0”,
“react”: “^18.2.0”

Question os how can i apply CSS to UI Elements in forge UI. I could not find documentation for this topic.
https://developer.atlassian.com/platform/forge/ui-kit-components/fragment/

I know this will be possible in Custom UI but i am looking in below code in jsx file.

import React from "react";
import ForgeUI, {
  render,
  Fragment,
  IssuePanel,
  TextArea,
  TextField,
  Form,
  useProductContext,
  useState,
  Button,
  ErrorPanel,
  SectionMessage,
  Text,
} from "@forge/ui";



//some other imports

const styles = `
  .my-form {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin-bottom: 24px;
  }
  
  .my-buttons {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    margin-top: 12px;
  }
  
  .my-button {
    margin-left: 8px;
  }
  
  .my-button-primary {
    background-color: #0052cc;
    color: #fff;
  }
  
  .my-button-default {
    background-color: #f4f5f7;
    color: #172b4d;
  }
`;

const App = () => {

    return (
        <Fragment>
           <style>{styles}</style>

           <Form
      onSubmit={onSubmitChangeWithContext}
      className="my-form"
    >
     
       
     <Button
            text="POST"
            onClick={onSubmit}
         
            className="my-button my-button-primary"
          />
<Button
            text="Clear"
            onClick={onClear}
         
            className="my-button my-button-default"
          />

</Form>
  </Fragment>
  );
};

export const run = render(
  <IssuePanel>
    <App />
  </IssuePanel>
);

</Form>
</Fragment>
);
};

export const run = render(
<IssuePanel>
  <App />
</IssuePanel>
);

Thanks,
Showkath.

1 Like