我正在處理一個 Material UI 表單，其中輸入框（Text Field）在加載時為 200px 寬。
我想讓輸入框僅在選擇或單擊框時擴展為 100% 寬度。
...
<FormGroup sx={{ maxWidth: "200px" }}>
<FormControl>
<TextField
id="first_name"
label="First name" />
</FormControl>
</FormGroup>
...
我正在尋找類似如何將輸入欄位拉伸到全寬？但使用 Material UI。
我嘗試過使用onClick屬性，TextField但沒有在點擊時注冊事件。
我知道有一個fullWidth屬性，TextField但我只是不確定如何在點擊時更改屬性。
uj5u.com熱心網友回復：
從中洗掉寬度FormGroup并在內部添加，TextField然后以 100% 的寬度覆寫 css 類。transition如果您想比即時平滑地增加寬度，也可以添加屬性。
...
<FormGroup>
<FormControl>
<TextField
sx={{
width: 200,
'&:focus-within':{
width:'100%',
},
transition: 'width 1s',
}}
id="first_name"
label="First name"
/>
</FormControl>
</FormGroup>
...
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/522446.html