reactjs - How to show line numbers in TextField Material-UI component in multiline mode?

Question

I'm using the TextField component in multi-line mode to edit the query text (sort of like a simple code editor), but it doesn't display line numbers. Can I somehow program to show the line numbers next to it?

    <TextField
       className="mt-8 mb-16 mx-4"
       label="Query Text"
       autoFocus
       id="my_query"
       name="my_query"
       value={form.my_query}
       onChange={handleChange}
       variant="outlined"
       multiline
       rows={16}
       fullWidth
/>

I tried to use react-simple-code-editor, but it didn't work for me due to the architecture of my web application (there is no onChange event and e object, but only onValueChange - without the e event object), and my form automatically transmits changes onChange to the form. In short, react-simple-code-editor doesn't suit me.

And it would be nice if someone could suggest how to display line numbers using the standard TextField component in multiline mode from the material-ui library.

Answer 1

等待大神答复