Javascript 如何使用 React Material UI 覆盖 TextField 组件的宽度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35093107/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to override the width of a TextField component with react Material UI?
提问by Nicolas Henin
I'm trying to reduce the width of that component :
我正在尝试减少该组件的宽度：
https://github.com/callemall/material-ui/blob/master/src/TextField/TextField.jsx
https://github.com/callemall/material-ui/blob/master/src/TextField/TextField.jsx
Here is the render method :
这是渲染方法：
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 !
谢谢 ！
回答by Anton Pelykh
You also can use fullWidthpropertywith React Material UI.
您还可以在 React Material UI 中使用fullWidth属性。
<TextField
id="full-width-text-field"
label="Label"
placeholder="Placeholder"
helperText="Full width!"
margin="normal"
fullWidth
/>
回答by pratikpawar
You could either specify inline style on element like below
您可以在元素上指定内联样式，如下所示
<TextField
hintText="Email"
ref="email"
style = {{width: 100}} //assign the width as your requirement
/>
Or you could do as below.
或者你可以做如下。
Declare a stylesvariable with css properties.
声明一个styles带有 css 属性的变量。
var styles = StyleSheet.create({
textFld: { width: 100, height: 40} //assign the width as your requirement
});
Assign it to stylein your rendercode.
style在您的render代码中将其分配给。
<TextField
hintText="Email"
ref="email"
style = {styles.textFld}
/>
Give it try let me know if it works for you. I am new to react js as well.
试一试让我知道它是否适合你。我也是反应 js 的新手。
You could refer to documentations and other similar question on SO for clarity. http://facebook.github.io/react-native/docs/style.html#content
为了清楚起见，您可以参考 SO 上的文档和其他类似问题。 http://facebook.github.io/react-native/docs/style.html#content
http://facebook.github.io/react-native/
http://facebook.github.io/react-native/
http://facebook.github.io/react-native/docs/flexbox.html#content
http://facebook.github.io/react-native/docs/flexbox.html#content
回答by Made in Moon
From the doc:
从文档：
style -> object -> Override the inline-styles of the root element.
inputStyle -> object -> Override the inline-styles of the TextField's input element.
etc.
style -> object -> 覆盖根元素的内联样式。
inputStyle -> object -> 覆盖 TextField 输入元素的内联样式。
等等。
So you can do:
所以你可以这样做：
<TextField
hintText=".."
ref=".."
style ={{width: '100%'}}
inputStyle ={{width: '100%'}}
/>
And maybe also by giving a id or className to the component, and targeting with css (adding !important):
也可能通过为组件提供 id 或 className，并使用 css 定位（添加 !important）：
<TextField
id="myId"
className="myClass"
/>
-----
.myId{
width: 100% important!;
}
