What is the default styling of React AgGrid custom cell editor?

Question

Here https://www.ag-grid.com/react-data-grid/cell-editors/ is the example of most simple custom cell editor:

export default ({ value, onValueChange }) => {
   return (
       <input
           type="text"
           value={value || ''}
           onChange={({ target: { value }}) => onValueChange(value === '' ? null : value)}
       />
   );
} 

It works, but the styling of this editor is somehow strange. There is an extra border (which may be also different from the default editor), that is smaller than the cell space and it may be, that the font is smaller as well. And no text is selected upon endering this custom editor.

My question is - how can I apply the styling of the default cell editor to this component? Or maybe I can inherit default cell editor or maybe I can just put here the default cell editor (maybe it is named agGridDefaultEditor or somehow other) and make my adornments on it?

My intention is to adorn the input field with custom popper (where the search fields will be) and I have done it, but the problem is that the cell itself is presented differently from the other cells upon entering this cell with doubleclick.

https://www.ag-grid.com/react-data-grid/provided-cell-editors-text/ mentions, that the default text editor is called agTextCellEditor. Maybe I can resovle this constant into JavaScript component and put it instead of <input>.

https://blog.ag-grid.com/learn-to-customize-react-grid-in-less-than-10-minutes/ is another tutorial on custom renderer (implemented via span) and editor (implemented via input) and it does not mention or suggest any styling and still - their pictures of the custom fields are perfect - consistent styling with the default editors.

Answer 1

I have no idea, why AgGrid examples (https://github.com/ag-grid/react-data-grid/blob/main/customization-demo-classes/src/NumericEditor.js) may work, but my experience shows, that adding litany of class-names solved the issue and the editor starts appear in the default styling:

import React, { useState, useRef, useEffect, useImperativeHandle, forwardRef, memo } from 'react';

const MinimalAgGridCellEditor3 = ({ value, onValueChange }) => {

    return (
        <input
            type="text"
            value={value || ''}
            //onChange={({ target: { value }}) => onValueChange(value === '' ? null : value)}
            onClick={({ target: { value }}) => onValueChange('05')}
            className="ag-cell-editor ag-labeled ag-label-align-left ag-text-field ag-input-field ag-input-field-input ag-text-field-input"
        />
    );

};

export default MinimalAgGridCellEditor3;

The class names are:

className="ag-cell-editor ag-labeled ag-label-align-left ag-text-field ag-input-field ag-input-field-input ag-text-field-input"