title: How can I imitate the look of the outline and label from Material-UI's outlined textfield?
body: <p>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.</p>
  
  <p>In the below image, notice how the "Due Date/Time" is taken from the Material-UI library and the title hides the border behind it but when I tried to imitate it with a custom component I just couldn't hide the border.</p>
  
  <p>Alternatively, Is there a better way to use this outline design instead of just implementing it with CSS?</p>
  
  <p>My current component looks liks this:</p>
  
  <pre><code>&lt;div style={inputContainerStyle}&gt;
          &lt;div style={{
            ...titleStyle,
            transform: 'translate(-43px, -11px) scale(0.75)',
            fontSize: '17px',
            color: 'rgba(0, 0, 0, 0.54)',
            position: 'absolute',
          }}
          &gt;
            Color
          &lt;/div&gt;
          &lt;div
            className="flex-row"
            style={{
              border: '1px solid rgba(0, 0, 0, 0.23)',
              padding: '18.5px 14px',
              borderRadius: '4px',
            }}
          &gt;
            {
              availableColors.map(color =&gt; &lt;div style={colorCircleStyle(color)} /&gt;)
            }
          &lt;/div&gt;
        &lt;/div&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/LZuUP.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/LZuUP.jpg" alt=""></a></p>