如何从Material-UI的轮廓文本字段中模仿轮廓和标签的外观? [英] How can I imitate the look of the outline and label from Material-UI's outlined textfield?

问题描述

我正在尝试从Material-UI模仿轮廓文本框，但是我不知道如何在标题文本后面隐藏边框.

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.

在下图中，请注意如何从Material-UI库中获取到期日期/时间"，标题隐藏了它的边框，但是当我尝试使用自定义组件模仿它时，我只是无法隐藏边界.

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.

或者，有没有更好的方法来使用此轮廓设计，而不是仅使用CSS来实现?

Alternatively, Is there a better way to use this outline design instead of just implementing it with CSS?

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

My current component looks liks this:

<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>

推荐答案

更新

对于许多情况，我的后续答案(避免使用TextField，因此对FormControl上下文没有副作用)可能更合适:

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?

TextField的操作具有很大的灵活性. TextField支持通过inputComponent属性插入不同类型的输入(例如Select，input，自定义选择器).您可以通过创建类似OutlinedDiv:

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 }) => <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;

传递给inputComponent的className负责使所有这些工作的CSS.然后，您可以像下面这样使用它:

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 (
    <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);

这篇关于如何从Material-UI的轮廓文本字段中模仿轮廓和标签的外观?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！