如何从Material-UI的轮廓文本字段中模仿轮廓和标签的外观？

Question

我正在尝试从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>

Answer 1

更新

在许多情况下，我的后续答案（避免使用上下文TextField，因此对FormControl上下文没有副作用）可能更合适：如何设置类似于Material-UI的大纲文本字段的静态大纲div？

您可以做什么拥有很大的灵活性TextField。TextField支撑件在不同类型的输入（例如堵塞Select，input经由，定制拾取器）inputComponent属性。您可以利用以下方法创建一个自定义组件，从而将任何内容放入其标记的轮廓中OutlinedDiv：

import React from "react";

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

const InputComponent = ({ inputRef, ...other }) => <div {...other} />;
const OutlinedDiv = ({ children, label }) => {
  return (
    <TextField
      variant="outlined"
      label={label}
      multiline
      InputLabelProps={{ shrink: true }}
      InputProps={{
        inputComponent: InputComponent
      }}
      inputProps={{ children: children }}
    />
  );
};
export default OutlinedDiv;

该className传递给inputComponent需要使这一切工作的CSS的照顾。然后，您可以像下面这样使用它：

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 (
    <div className="App">
      <OutlinedDiv label="Color Picker">
        <Grid container justify="center" alignItems="center">
          <Avatar style={{ backgroundColor: deepOrange[500] }} />
          <Avatar style={{ backgroundColor: deepPurple[500] }} />
          <Avatar style={{ backgroundColor: red[500] }} />
          <Avatar style={{ backgroundColor: green[500] }} />
          <Avatar style={{ backgroundColor: blue[500] }} />
        </Grid>
      </OutlinedDiv>
      <br />
      <br />
      <OutlinedDiv label="Custom Outlined Thing">
        You can put whatever you want in here.
      </OutlinedDiv>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);