Customize the UI appearance of the control in React MaskedTextBox component

import { MaskedTextBoxComponent, MaskFocusEventArgs } from '@syncfusion/ej2-react-inputs';
import * as React from "react";
import * as ReactDOM from "react-dom";

export default class App extends React.Component<{}, {}> {
  constructor(props: any) {
    super(props);
    this.onfocus = this.onfocus.bind(this);
  }
  public onfocus(args: MaskFocusEventArgs) {
      // sets cursor position at start of MaskedTextBox
      args.selectionEnd= args.selectionStart;
  }
  public render() {
      return (
        <div>
          <br/>
          <MaskedTextBoxComponent id="mask1" name="mask_value" placeholder="Enter user ID" floatLabelType='Always' mask= "00000" cssClass="e-style" value= "42648" focus={this.onfocus}/>
        </div>
      );
  }
};
ReactDOM.render(<App />, document.getElementById('masktextbox'));

#container {
    visibility: hidden;
}

#loader {
    color: #008cff;
    font-family: 'Helvetica Neue', 'calibiri';
    font-size: 14px;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}

.wrap {
    margin: 0 auto;
    width: 240px;
}

.e-mask.e-style .e-control.e-maskedtextbox {
    color: #00ffff ;
    letter-spacing: 10px ;
    font-size: xx-large ;
    border: 1px ;
    border-color: #ffffff ;
}

.e-control-wrapper.e-mask.e-float-input.e-style .e-float-line::before {
    background: #ffffff ;
}

.e-control-wrapper.e-mask.e-float-input.e-style .e-float-line::after {
    background: #ffffff ;
}

.e-control-wrapper.e-mask.e-float-input.e-style .e-float-text.e-label-top {
    color: #00ffff ;
    font-size: medium ;
}