如何知道其他组件中反应材料文本字段的高度?

Question

我写了下面的代码来切换TextField和我的自定义组件。但是我不能设置自定义组件的高度与TextField相同。在这种情况下我能做些什么呢?

<Grid item xs={12}>
<FormControlLabel 
control={<Switch value={toggleView} onChange={e => setToggleView(e.target.checked)} />} 
label="view" 
style={{position: 'absolute', top: `-4%`, right:'0', zIndex: '9999'}}/>
{
toggleView? <CustomComponent/> :
<TextField 
rows="10"
multiline
fullWidth={true}
value={content}
onChange={e => setContent(e.target.value)}
label="content"
/>
}
</Grid>

Answer 1

您可以通过各种方式更改textfield的高度和其他属性，例如:

1. sx prop:

<TextField
sx={{ '& .MuiOutlinedInput-root': { height: '50px' } }} // change height form here
variant="outlined"
/>

2. Mui style component way(using emotion)

import { styled } from '@mui/material/styles'
import TextField from '@mui/material/TextField'
export const StyledTextField = styled(TextField)(() => ({
'& .MuiInputBase-root': {
height: 50
}
}))