React Material UI Change Height of Textfield
You can do this with changing style of mui component in your style classes like this
MuiInputLabel-outlined.MuiInputLabel-shrink
{
padding: .3rem !important;
transform: translate(-14px, -14px) scale(0.7) !important;
}
You can change my params
How to customize the border color, width, and height of Material-UI Text Field with styled-components
IIUC styled-components
is not a requirement for you. MUI has several built-in ways to override styles, you can learn more about it here. Alternatively you can look at the many code examples for each component, which almost always include style overrides (click on the Show full source icon). In this case, Text Fields.
To make it a bit more obvious in my example below, I changed the style values, you just need to put in your own.
const { TextField, makeStyles } = MaterialUI
const useStyles = makeStyles({
input: {
width: 400,
height: 150,
'& input + fieldset': {
borderColor: 'hotpink',
},
},
});
function InputBox() {
const classes = useStyles();
return (
<TextField
InputProps={{
className: classes.input,
}}
id="outlined-basic"
variant="outlined"
label="Default"
defaultValue="Input Text"
/>
);
}
ReactDOM.render(<InputBox />, document.getElementById('root'))
<script src="https://unpkg.com/react@latest/umd/react.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/babel-standalone@latest/babel.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
<div id="root"></div>
How to reduce height and size of Material-UI Select input field in Material UI & formik?
Try using SelectProps on your Select field thusly:
import { Field } from "formik";
import { TextField } from "formik-material-ui";
const SelectFieldStyle = {
padding: 7,
fontSize: "0.75rem",
};
export default (props: any) => {
return (
<Field
component={TextField}
SelectProps={{
style: SelectFieldStyle,
}}
type="text"
select={true}
align="left"
size="small"
fullWidth
margin="none"
variant="outlined"
{...props} // add props at the key to override any user defined similar props
>
<MenuItem value={1}>A</MenuItem>
<MenuItem value={2}>B</MenuItem>
<MenuItem value={3}>C</MenuItem>
</Field>
);
};
Here's the link to the API: https://material-ui.com/api/text-field/
how to change the height of Material-UI textfield without using react hooks
You should be able to use withStyles
- I had to use minHeight
... using just height
would not work for me..
Edit: since you were asking about multiple TextFields
in a single class, I have updated my answer.
Stackblitz - single class with a single TextField
Stackblitz - single class with multiple TextField
Single Class with Single TextField:
import React, { Component } from "react";
import ReactDOM from "react-dom";
import TextField from "@material-ui/core/TextField";
import { withStyles } from "@material-ui/core/styles";
const styles = {
someTextField: {
minHeight: 420
}
};
class App extends Component {
constructor(props) {
super(props);
this.state = {
year: "2010",
otherAttributes: "",
};
}
handleChangefor = (propertyName) => (event) => {
this.setState({
...this.state,
[propertyName]: event.target.value
})
}
render() {
return (
<div>
<p>text field below </p>
<TextField
id="outlined-multiline-flexible"
label="year"
multiline
rowsMax="10"
value={this.state.year}
onChange={this.handleChangefor("year")}
margin="normal"
helperText=""
variant="filled"
InputProps={{ classes: { input: this.props.classes.someTextField } }}
/>
</div>
);
}
}
const StyledTextFieldApp = withStyles(styles)(App)
const rootElement = document.getElementById("root");
ReactDOM.render(<StyledTextFieldApp />, rootElement);
Single Class with Multiple TextField:
import React, { Component } from "react";
import ReactDOM from "react-dom";
import TextField from "@material-ui/core/TextField";
import { withStyles } from "@material-ui/core/styles";
const styles = {
someTextField: {
minHeight: 420
},
someOtherTextField: {
minHeight: 120,
}
};
class App extends Component {
constructor(props) {
super(props);
this.state = {
year: "2010",
otherAttributes: "",
};
}
handleChangefor = (propertyName) => (event) => {
this.setState({
...this.state,
[propertyName]: event.target.value
})
}
render() {
return (
<div>
<p>text field below </p>
<TextField
id="outlined-multiline-flexible"
label="year"
multiline
rowsMax="10"
value={this.state.year}
onChange={this.handleChangefor("year")}
margin="normal"
helperText=""
variant="filled"
InputProps={{ classes: { input: this.props.classes.someTextField } }}
/>
<TextField
id="outlined-multiline-flexible"
label="year"
multiline
rowsMax="10"
value={this.state.year}
onChange={this.handleChangefor("year")}
margin="normal"
helperText=""
variant="filled"
InputProps={{ classes: { input: this.props.classes.someOtherTextField } }}
/>
</div>
);
}
}
const StyledTextFieldApp = withStyles(styles)(App)
const rootElement = document.getElementById("root");
ReactDOM.render(<StyledTextFieldApp />, rootElement);
how to make a height responsive textfield in Material UI?
I just solved it by changing the parent grid into a div and changing the display setting of the div to 'flex'. Also, I set the marginTop and marginBottom settings in the 'labels' class to be a little bit higher.
As long as the parent div have the flex direction set to 'column'.
How to make TextField and Button equal height in Material-UI?
If you use the InputProps prop on <TextField />
<TextField
InputProps={{
className: classes.input
}}
variant="outlined"
/>
codesandbox
Related Topics
How to Load CSS Rules Dynamically in Webkit (Safari/Chrome)
Concatenate String in Less in Loop
How to Create a Concave Bottom Border in CSS
Hyperlinks Showing Url with Blueprint
How to Overwrite CSS Variable with Its Own Value
Using Translatey on Thead and Tbody Messes Up Z-Index
How to Override Gwt Obfuscated Style for Datagrid Header
Z-Index Between Children and Parents
CSS Columns Bug - 5 Column Count Only Showing 4 (With Images)
"Text-Decoration" and the ":After" Pseudo-Element
Passing CSS Property:Value as SASS Mixin Argument
Keep Width When Using Letter-Spacing on Hover
CSS Problem with Background-Attachment:Fixed;
Cross-Browser Issue: Min-Height and Collapsing Margins
What Does It Mean When a CSS Property Starts with a Dash
Reading Documents CSS in Chrome Extension
How to Get Rid of Unwanted Space Between Inline-Block Columns