How can I direct React-Quill to apply inline styles instead of classes?

I'm using React-quill and noticed that for some content the classes are being returned. Is there any way to get inline styles instead of classes.

<p>Pjhfdcjhad <span class="ql-size-large">jadhjvhgds</span> dsbjhvgdsz xv</p>

should instead be

<p>Pjhfdcjhad <span style="font-size: 1.5em;">jadhjvhgds</span> dsbjhvgdsz xv</p>

Sample codesandbox below

https://codesandbox.io/s/agitated-snowflake-zvy6l

My oh my, this is extremely difficult to customize. A few work out of the box with just register. Some require CSS changes and some don't.

This helps get inline styles for font-sizes, indent, text direction etc.

Align & Direction:

Easiest of the lot--just needs registering:

//Text direction
Quill.register(Quill.import("attributors/style/direction"), true);
//Alignment
Quill.register(Quill.import("attributors/style/align"), true);

Font-size:

const Size = Quill.import("attributors/style/size");
Size.whitelist = ["0.75em", "1em", "1.5em", "2.5em"];
Quill.register(Size, true);

Requires CSS changes to get the menu accommodated correctly in addition to registering:

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="0.75em"]::before {
  content: "Small";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="1em"]::before {
  content: "Normal";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="1.5em"]::before {
  content: "Large";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="2.5em"]::before {
  content: "Huge";
}

.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="0.75em"]::before {
  content: "Small";
  font-size: 0.75em !important;
}

.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="1em"]::before {
  content: "Normal";
  font-size: 1em !important;
}

.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="1.5em"]::before {
  content: "Large";
  font-size: 1.5em !important;
}

.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="2.5em"]::before {
  content: "Huge";
  font-size: 2.5em !important;
}

Text Indent:

Parchment custom format

const Parchment = Quill.import("parchment");
class IndentAttributor extends Parchment.Attributor.Style {
  add(node, value) {
    if (value === 0) {
      this.remove(node);
      return true;
    } else {
      return super.add(node, `${value}em`);
    }
  }
}

let IndentStyle = new IndentAttributor("indent", "text-indent", {
  scope: Parchment.Scope.BLOCK,
  whitelist: ["1em", "2em", "3em", "4em", "5em", "6em", "7em", "8em", "9em"]
});

Quill.register(IndentStyle, true);

Link Editor cut-off at left:

Needs a data-text-editor for bounding container

  <div data-text-editor="form-editor">
    <ReactQuill
      ....
      bounds={`[data-text-editor="form-editor"]`} //for link editor to be not cut-off
    />
  </div>

https://codesandbox.io/s/vibrant-chebyshev-50eg7