I'm trying to reduce the width of the TextField
component:
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>
);
}
}
You also can look at fullWidth
property to make sure it is set properly.
<TextField
id="full-width-text-field"
label="Label"
placeholder="Placeholder"
helperText="Full width!"
margin="normal"
fullWidth // this may override your custom width
/>
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 styles
variable with css properties.
var styles = StyleSheet.create({
textFld: { width: 100, height: 40} //assign the width as your requirement
});
Assign it to style
in your render
code.
<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.
You could refer to documentations and other similar question on SO for clarity. 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
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.
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):
<TextField
id="myId"
className="myClass"
/>
-----
.myId{
width: 100% important!;
}
If you want to make the TextField
's width expanded as much as the parent's width ( width: 100%
):
<TextField label="Full width" fullWidth />
If you want to set the TextField
's width to the exact value:
<Box width={350}>
<TextField label="width: 350px" fullWidth />
</Box>
You can also set the style of the TextField
directly if you don't want to add a wrapper component.
const useStyles = makeStyles({
root: {
width: 350
}
});
function App() {
const classes = useStyles();
return <TextField label="width: 350px" className={classes.root} />;
}
I'd advice you against using inline styles as suggested in other answers since inline styles are harder to override. You should by default use Material-UI styles because it's more flexible and better integrated with Material-UI components. For example, you can cherry-pick the sub-components to override in a larger components, or style psuedo classes and elements, which can't be done with inline style.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.