问题描述
我正在尝试使用 material-UI 文本字段作为带有多行道具的文本区域,但根据行道具,它的高度并没有变大,尽管如果我删除道具变体 =“轮廓”,它会得到虽然我在代码沙箱中尝试了相同的道具并且它工作得很好但不是在这里,但开始工作只是不使用轮廓边界,请指出我做错了什么?
import { withStyles,Grid,TextField } from '@material-ui/core';
const textFieldStyle = {
background: '#ffff',borderRadius: 5,width: '100%',};
const StyledTextArea = withStyles({
root: {
'& .MuIoUtlinedInput-root > .MuiInputBase-input': {
fontSize: 13,},})(TextField);
export default function Template(props) {
return (
<React.Fragment>
<Grid container>
<Grid item xs={7}>
<StyledTextArea
id="outlined-multiline-static"
label="Multiline"
multiline
rows={4}
defaultValue="Default Value"
variant="outlined"
style={{ ...textFieldStyle }}
/>
</Grid>
</Grid>
</React.Fragment>
);
}
解决方法
尝试在 textInput 文本中添加一个 paddingHorizontal
。这将使宽度随着文本输入被填充而扩展。您还可以使用 maxWidth
So under style try this:
<StyledTextArea
id="outlined-multiline-static"
label="Multiline"
multiline
rows={4}
defaultValue="Default Value"
variant="outlined"
style={[{ ...textFieldStyle },{paddingHorizontal:20,maxWidth:100}]}
/>