web-dev-qa-db-ja.com

React Material UIでTextFieldコンポーネントの幅をオーバーライドするにはどうすればよいですか？

私はそのコンポーネントの幅を小さくしようとしています：

https://github.com/callemall/material-ui/blob/master/src/TextField/TextField.jsx

Renderメソッドは次のとおりです。

  render() {

    return (
      <div>
          <div>
            <form onSubmit={this.handleSubmit}>
                <TextField
                  hintText="Email"
                  ref="email"
                /><br/>
                <TextField
                  hintText="Password"
                  type="password"
                  ref="password"
                /><br/>
              <button className="btn btn-success" onClick={this.loginCommand}><i className="fa fa-sign-in"/>{' '}Log In</button>
            </form>
          </div>
      }
      </div>
    );
  }
}

THX ！

enter image description here

javascriptreactjsreactive-programmingmaterial-ui
12
Nicolas Henin

fullWidth property with React Material UI）も使用できます。

<TextField
      id="full-width-text-field"
      label="Label"
      placeholder="Placeholder"
      helperText="Full width!"
      margin="normal"
      fullWidth
/>
19
Anton Pelykh

以下のように要素にインラインスタイルを指定できます

  <TextField
        hintText="Email"
        ref="email"
        style = {{width: 100}} //assign the width as your requirement
   />

または、次のようにできます。

CSSプロパティでstyles変数を宣言します。

var styles = StyleSheet.create({
    textFld: { width: 100, height: 40}   //assign the width as your requirement
});

styleコードのrenderに割り当てます。

<TextField
              hintText="Email"
              ref="email"
              style = {styles.textFld}
            />

それがあなたのために働くかどうか私に知らせてみてください。私もjsに反応するのは初めてです。

SO明確にするために、ドキュメントおよび他の同様の質問を参照できます。 http://facebook.github.io/react-native/docs/style.html#content =

http://facebook.github.io/react-native/

http://facebook.github.io/react-native/docs/flexbox.html#content

React.jsインラインスタイルのベストプラクティス

14
pratikpawar

doc から：

スタイル->オブジェクト->ルート要素のインラインスタイルをオーバーライドします。

inputStyle-> object-> TextFieldの入力要素のインラインスタイルをオーバーライドします。

等.

だからあなたができる：

 <TextField
     hintText=".."
     ref=".."
     style ={{width: '100%'}}
     inputStyle ={{width: '100%'}}
 />

また、コンポーネントにidまたはclassNameを指定し、css（！importantを追加）でターゲティングすることもできます。

 <TextField
     id="myId"
     className="myClass"
 />

 -----

 .myId{
      width: 100% important!;
  }
2
Made in Moon