我正在使用 material-ui v5 進行學習。我在覆寫 mui Select 組件的默認樣式時遇到了困難。我想在將滑鼠懸停在 Select 上并處于聚焦狀態時更改其顏色。目前，聚焦狀態的顏色是這樣的。
這是我的代碼：
import { useState, useEffect } from 'react';
import { makeStyles } from '@mui/styles';
import { Select, MenuItem } from '@mui/material';
const useStyles = makeStyles({
select: {
'&.MuiOutlinedInput-root': {
width: '200px'
},
'& .MuiOutlinedInput-notchedOutline': {
borderColor: 'red',
'&:hover': {
borderColor: 'green'
}
},
}
})
function App() {
const classes = useStyles();
const [age, setAge] = useState('');
const handleChange = (event: SelectChangeEvent) => {
setAge(event.target.value);
};
return (
<Select
variant="outlined"
className={classes.select}
labelId="demo-simple-select-label"
id="demo-simple-select"
value={age}
label="Age"
onChange={handleChange}
>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
);
}
export default App;
任何幫助將不勝感激。
uj5u.com熱心網友回復：
首先：
@mui/styles 是 MUI 的傳統樣式解決方案。它依賴于 JSS 作為樣式解決方案，它不再在 @mui/material 中使用，在 v5 中已棄用。如果您不想在包中同時包含情感和 JSS，請參閱@mui/system 檔案，這是推薦的替代方法。
你可以在這里查看更多。因此，對于自定義，您可能應該使用 styled-components。
Selectcomponents inMUI使用它后面的輸入欄位，并完成您需要自定義的內容input，這就是您使用.MuiOutlinedInput-root類的原因。所以，這里MUI有一些input自定義示例。
這是一個自定義Select示例：
const CustomSelect = styled(Select)(() => ({
width: 300,
"&.MuiOutlinedInput-root": {
"& fieldset": {
borderColor: "red"
},
"&:hover fieldset": {
borderColor: "yellow"
},
"&.Mui-focused fieldset": {
borderColor: "green"
}
}
}));
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/481806.html
標籤：javascript css 反应 材料-ui