How can I imitate the look of the outline and label from Material-UI's outlined textfield?

Question

I\'m trying to imitate the outlined textfield from Material-UI but I don\'t know how to hide the border behind the title text.

In the below image, notice how the \"D

Answer 1

UPDATE

For many scenarios, my later answer (which avoids using TextField and therefore has no side-effects on FormControl context) may be more appropriate: How can I set an static outlined div similar to Material-UI's outlined textfield?

---

There is a great deal of flexibility in what you can do with TextField. TextField supports plugging in different types of inputs (e.g. Select, input, custom pickers) via the inputComponent property. You could leverage this to put anything inside its labelled outline by creating a custom component like this OutlinedDiv:

import React from "react";

import TextField from "@material-ui/core/TextField";

const InputComponent = ({ inputRef, ...other }) => 
;
const OutlinedDiv = ({ children, label }) => {
  return (
    
  );
};
export default OutlinedDiv;

The className passed to the inputComponent takes care of the CSS that makes this all work. You can then use this like in the following:

import React from "react";
import ReactDOM from "react-dom";

import OutlinedDiv from "./OutlinedDiv";
import Avatar from "@material-ui/core/Avatar";
import deepOrange from "@material-ui/core/colors/deepOrange";
import deepPurple from "@material-ui/core/colors/deepPurple";
import red from "@material-ui/core/colors/red";
import green from "@material-ui/core/colors/green";
import blue from "@material-ui/core/colors/blue";
import Grid from "@material-ui/core/Grid";

function App() {
  return (
    

      
        
          
          
          
          
          
        
      
      

      

      
        You can put whatever you want in here.
      
    
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(, rootElement);