如何突出顯示 用戶點擊后？
<Box py={2}>
<Grid container width="330px">
<Grid container direction="column" item xs align="left">
<Grid item>
<Typography
variant="h6"
className="locationTitle"
display="block"
>
{' '}
{location.name}{' '}
</Typography>
</Grid>
</Grid>
</Grid>
<Typography variant="body" display="block">
{' '}
{location.address.street1}
</Typography>
</Box>
css
.css-1yjo05o:hover{
background-color: lightgray;
}
懸停很好，但是當我嘗試:focus和時:target，它不起作用
uj5u.com熱心網友回復：
您永遠不應該對 Mui 樣式引擎生成的哈希進行樣式設定。它們不是靜態的。相反，您需要一個onClick監聽器來切換 a className（如果您使用 CSS）或 SX 道具（如果您使用 @mui/material）。
const [highlight, setHighlight] = useState(false)
<Box
py={2}
onClick={() => setHighlight(!highlight)}
sx={{ bgcolor: highlight ? 'lightgrey' : 'unset' }}
>
當然，這有可能一次突出顯示 1 個以上的框。如果您一次想要 1 個框，則必須將狀態提升到父組件并使用子組件的索引來切換突出顯示。演示。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/399016.html