50 lines
1.4 KiB
JavaScript
50 lines
1.4 KiB
JavaScript
|
import * as React from 'react';
|
||
|
|
import Input from '@mui/material/Input';
|
||
|
|
|
||
|
|
function Textarea() {
|
||
|
|
const [value, setValue] = React.useState(
|
||
|
|
`Hey, sorry for being late to respond. Here is a codesandbox. It actually happens when I reduce the font-size of the input. Try adding some text or paste a long paragraph and you will the bottom margin being increased. It works fine with the default font-size.`,
|
||
|
|
);
|
||
|
|
|
||
|
|
const handleChange = (event) => {
|
||
|
|
setValue(event.target.value);
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div>
|
||
|
|
<Input
|
||
|
|
sx={{
|
||
|
|
width: 200,
|
||
|
|
'& .MuiInput-input': {
|
||
|
|
fontSize: 13,
|
||
|
|
boxSizing: 'border-box',
|
||
|
|
border: '10px solid black',
|
||
|
|
},
|
||
|
|
}}
|
||
|
|
multiline
|
||
|
|
value={value}
|
||
|
|
onChange={handleChange}
|
||
|
|
/>
|
||
|
|
<Input
|
||
|
|
sx={{
|
||
|
|
width: 200,
|
||
|
|
'& .MuiInput-input': { fontSize: 13, boxSizing: 'content-box', padding: '10px' },
|
||
|
|
}}
|
||
|
|
multiline
|
||
|
|
value={value}
|
||
|
|
onChange={handleChange}
|
||
|
|
/>
|
||
|
|
<Input style={{ width: 200 }} multiline placeholder="rows" rows={3} />
|
||
|
|
<Input style={{ width: 200 }} multiline value={value} onChange={handleChange} maxRows={4} />
|
||
|
|
<Input style={{ width: 200 }} multiline placeholder="long placeholder long placeholder" />
|
||
|
|
<Input
|
||
|
|
style={{ width: 200 }}
|
||
|
|
multiline
|
||
|
|
defaultValue="long default value long default value"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default Textarea;
|