如何从 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);

Answer 2

无需编写 Outlined div 组件等。我们可以使用 FormControl、FormLabel 和 Formgroup 来实现这一点。如果您遵循 Outlined div 逻辑，您的输入字段将失去焦点。

下面的解决方案非常简单快捷，您只需包装代码即可：

<FormControl component="fieldset" className="fieldset">
  <FormLabel component="Legend">Title</FormLabel>
  <FormGroup row>
    {/*Your Input fields e.g TextField or Select e.t.c*/}
  </FormGroup>
</FormControl>

现在使用 useStyles 应用一些 css：

fieldset: {
  width: '100%',
  marginBottom: 10,
  padding: 10,
  border: '1px solid #ddd',
  borderRadius: 5
}