How to customize the UI in React NumericTextBox

Apply custom styling to the NumericTextBox by adding a custom CSS class using the cssClass property. This allows you to override default styles and match your application’s design system. The following example demonstrates how to customize the NumericTextBox appearance with custom CSS.

index.jsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';
// initializes NumericTextBox component
export default class App extends React.Component {
    render() {
        return (<NumericTextBoxComponent id="sample" value={10} cssClass={'e-style'} placeholder="Enter value" floatLabelType={'Always'}/>);
    }
}
ReactDOM.render(<App />, document.getElementById('numericContainer'));

index.tsx

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

// initializes NumericTextBox component
export default class App extends React.Component<{}, {}> {
  render() {
    return (
      <NumericTextBoxComponent id="sample" value={10} cssClass={'e-style'} placeholder="Enter value" floatLabelType={'Always'}/>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('numericContainer'));