相关疑难解决方法(0)

我试图模仿 Material-UI 中的轮廓文本字段，但我不知道如何隐藏标题文本后面的边框。

在下图中，请注意“截止日期/时间”是如何从 Material-UI 库中获取的，标题将边框隐藏在其后面，但是当我尝试使用自定义组件模仿它时，我无法隐藏边框。

或者，有没有更好的方法来使用这个大纲设计而不是仅仅用 CSS 来实现它？

我当前的组件看起来像这样：

<div style={inputContainerStyle}>
        <div style={{
          ...titleStyle,
          transform: 'translate(-43px, -11px) scale(0.75)',
          fontSize: '17px',
          color: 'rgba(0, 0, 0, 0.54)',
          position: 'absolute',
        }}
        >
          Color
        </div>
        <div
          className="flex-row"
          style={{
            border: '1px solid rgba(0, 0, 0, 0.23)',
            padding: '18.5px 14px',
            borderRadius: '4px',
          }}
        >
          {
            availableColors.map(color => <div style={colorCircleStyle(color)} />)
          }
        </div>
      </div>