web-dev-qa-db-ja.com

TextFieldの高さを設定しますmaterial-ui

index.js

import React from 'react'
import TextField from '@material-ui/core/TextField'
import style from './style'
import withStyles from 'hoc/withStyles'
import { connect } from 'react-redux'

class SearchField extends React.Component {
  constructor (props) {
    super(props)
    this.onChange = this.onChange.bind(this)
  }

  onChange (event) {
    const { dispatcher } = this.props
    this.props.dispatch(dispatcher(event.target.value))
    event.preventDefault()
  }

  render () {
    const { classes, placeholder } = this.props
    return (
      <TextField 
        label={placeholder} 
        placeholder={placeholder}
        InputProps={{ classes: { input: classes.resize } }}
        className={classes.textField}
        margin="normal"
        autoFocus={true} 
        variant="outlined" 
        onChange={this.onChange}
      />
    )
  }
}

export default withStyles(style)(connect()(SearchField))

style.js

export default function () {
  return {
    container: {
      display: 'flex',
      flexWrap: 'wrap'
    },
    textField: {
      width: 'auto'
    },
    resize: {
      fontSize: 11
    }
  }
}

https://material-ui.com/api/text-field/

TextFieldの高さを変更するにはどうすればよいですか？私はドキュメントでそれを見つけることができません。 CSSで直接変更しようとすると、正しく機能しません（ このように -画面26pxで選択された高さ）。

私は何をすべきか？

cssreactjsmaterial-ui
8
Andrey Radkevich

他の答えは便利ですが、labelがoutlinedコンポーネントで使用されている場合（問題になっているように）labelが中心に置かれないため、うまくいきませんでした。 。これがあなたのユースケースである場合、読み進めてください。

<label>コンポーネントのスタイル設定方法は、position: absoluteとtransformを使用していくぶん特異です。このようにして、フィールドに焦点を合わせたときにアニメーションが機能するようにしました。

以下は、最新のmaterial-ui v4で機能しました（vでも問題なく動作するはずです）。

// height of the TextField
const height = 44

// magic number which must be set appropriately for height
const labelOffset = -6

// get this from your form library, for instance in
// react-final-form it's fieldProps.meta.active
// or provide it yourself - see notes below
const focused = ???

---

<TextField
  label="Example"
  variant="outlined"

  /* styles the wrapper */
  style={{ height }}

  /* styles the label component */
  InputLabelProps={{
    style: {
      height,
      ...(!focused && { top: `${labelOffset}px` }),
    },
  }}

  /* styles the input component */
  inputProps={{
      style: {
        height,
        padding: '0 14px',
      },
  }}
/>

メモ

  • withStyles HOCではなく、インラインスタイルを使用しました。このアプローチは私には単純だと思われるためです。
  • このソリューションにはfocused変数が必要です-final-form、formikおよびおそらく他のフォームライブラリでこれを取得します。生のTextField、またはこれをサポートしていない別のフォームライブラリを使用している場合は、これを自分で接続する必要があります。
  • 解決策は、選択した静的labelOffsetに結合されたlabelを中央に配置するために、マジックナンバーheightに依存しています。 heightを編集する場合は、labelOffsetも適切に編集する必要があります。
  • このソリューションしないラベルのフォントサイズの変更をサポートします。入力フォントサイズを変更できるのは、そのフォントとラベルが一致していない場合に限ります。問題は、アウトライン境界にラベルを収容する「ノッチ」のサイズが、ラベルのフォントサイズがデフォルトの場合にのみ機能するマジックナンバー比に従ってjavascriptで計算されることです。ラベルのフォントサイズを小さく設定すると、ラベルが境界線に表示されるときにノッチも小さくなります。これをオーバーライドする簡単な方法はありません。計算全体を自分で繰り返し、ノッチの幅（コンポーネントはfieldset> legendです）をCSSで自分で設定する以外にありません。私にとっては、これは価値がありませんでした。高さ44pxのデフォルトのフォントサイズを使用しても問題ないからです。
5
davnicwil

高さを指定する方法を示していませんでしたが、font-sizeに使用したアプローチは正しいアプローチです。これは、高さが異なる2つのテキストフィールドを示す例です。

import React from "react";
import ReactDOM from "react-dom";
import TextField from "@material-ui/core/TextField";
import { withStyles } from "@material-ui/core/styles";
const styles = {
  input1: {
    height: 50
  },
  input2: {
    height: 200,
    fontSize: "3em"
  }
};
function App(props) {
  return (
    <div className="App">
      <TextField
        variant="outlined"
        InputProps={{ classes: { input: props.classes.input1 } }}
      />
      <TextField
        variant="outlined"
        InputProps={{ classes: { input: props.classes.input2 } }}
      />
    </div>
  );
}
const StyledApp = withStyles(styles)(App);
const rootElement = document.getElementById("root");
ReactDOM.render(<StyledApp />, rootElement);

そして これはコードサンドボックスです 同じコードを使用しているので、実行中です。

4
Ryan Cogswell

コンポーネントは、ブール値であるmultiline propを取ります。これをtrueに設定してから、コンポーネントのrows propを数値に設定します。

   <TextField
      multiline={true}
      rows={3}
      name="Description"
      label="Description"
      placeholder="Description"
      autoComplete="off"
      variant="outlined"
      value={description}
      onChange={e => setDescription(e.target.value)}
    />
0
Bruno Crosier