How to change the style/skin of the TinyMCE pop up window?

Question

I am currently using TinyMCE editor to insert text which has been configured differently than the TinyMCE default style using CSS:

When clicking the link button, a pop up occurs on how to insert or edit the link, which is correct but I would like to change the style of this in contrast to the TinyMCE default style as it's not maintaining consistency with the rest of the web application that is being used.

The only relevant code I have seen is the following below:

    const makeDialog = (settings, onSubmit, editor) => {
  const urlInput = [{
      name: 'url',
      type: 'urlinput',
      filetype: 'file',
      label: 'URL',
      picker_text: 'Browse links'
    }];
  const displayText = settings.anchor.text.map(() => ({
    name: 'text',
    type: 'input',
    label: 'Text to display'
  })).toArray();
  const titleText = settings.flags.titleEnabled ? [{
      name: 'title',
      type: 'input',
      label: 'Title'
    }] : [];
  const defaultTarget = Optional.from(getDefaultLinkTarget(editor));
  const initialData = getInitialData(settings, defaultTarget);
  const catalogs = settings.catalogs;
  const dialogDelta = DialogChanges.init(initialData, catalogs);
  const body = {
    type: 'panel',
    items: flatten([
      urlInput,
      displayText,
      titleText,
      cat([
        catalogs.anchor.map(ListOptions.createUi('anchor', 'Anchors')),
        catalogs.rels.map(ListOptions.createUi('rel', 'Rel')),
        catalogs.targets.map(ListOptions.createUi('target', 'Open link in...')),
        catalogs.link.map(ListOptions.createUi('link', 'Link list')),
        catalogs.classes.map(ListOptions.createUi('linkClass', 'Class'))
      ])
    ])
  };
  return {
    title: 'Insert/Edit Link',
    size: 'normal',
    body,
    buttons: [
      {
        type: 'cancel',
        name: 'cancel',
        text: 'Cancel'
      },
      {
        type: 'submit',
        name: 'save',
        text: 'Save',
        primary: true
      }
    ],
    initialData,
    onChange: (api, {name}) => {
      dialogDelta.onChange(api.getData, { name }).each(newData => {
        api.setData(newData);
      });
    },
    onSubmit
  };
};

Answer 1

I have managed to find a solution for this. There is a way to override the CSS style by finding out what the class is and applying the CSS for the associated class that it is relevant to for example the HTML is shown as below

<div class="dialog-box"></div>

Then the appropriate CSS below would be applied:

.dialog-box {
border: 2px solid #b1b4b6 !important;
border-radius: 0px !important; }

The final output is shown as below:

It is essential to include !important so that it can override the default TinyMCE settings. The changes that occurred is a grey border and no border radius.