私はそのコンポーネントの幅を小さくしようとしています:
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 !
fullWidth
property with React Material UI)も使用できます。
<TextField
id="full-width-text-field"
label="Label"
placeholder="Placeholder"
helperText="Full width!"
margin="normal"
fullWidth
/>
以下のように要素にインラインスタイルを指定できます
<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
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!;
}