我剛剛開始開發一個React應用程序，并決定嘗試一下Material UI的預建組件。

然而，我一直很難弄清楚如何正確地定制組件及其樣式。

我的代碼:

import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@mui/material/MenuItem';
import FormControl from '@mui/material/FormControl';
import Select from '@mui/material/Select';

const Dropdown = ({ value, label, options, handleChange }) => {

    return (
        <FormControl
            className="dropdown-container"
            variant='outlined'
            sx={{
                minWidth: 120,
                backgroundColor: "#eb6060",
                borderRadius: "5px",
                border: "1px solid #eb6060",
            }}
        >
            <InputLabel shrink={false}>{value === "" ? label : ""}</InputLabel>
            <Select

                onChange={handleChange}
                label={value === "" ? label : ""}
                value={value}
                notched={false}
            >
                {options.map((option) => (
                    <MenuItem
                        key={option.code}
                        value={option.code}
                    >
                        {option.alias}
                    </MenuItem>
                ))}
            </Select>
        </FormControl>
    );
};

export default Dropdown;

這是我到目前為止在定制MUI的選擇組件方面的嘗試。我已經嘗試刪除收縮標簽和出現在每個選擇組件的邊界上的缺口。

我的定制方式正確嗎？

我如何進一步定制它來刪除當我單擊我的下拉組件時出現的藍色焦點輪廓，以及第一個MenuItem上的鍵盤焦點突出顯示？

編輯:添加了Prem Chaudhary給出的代碼，刪除了藍色輪廓。這是它現在的樣子:

我應該如何著手解決這樣的問題呢？例如，我仍然希望對此組件進行以下更改:

移除選擇組件標簽上的藍色高亮顯示 當菜單打開時，刪除第一個菜單項上的灰色突出顯示 當我打開菜單時，稍微加深選擇按鈕的背景 理想情況下，我應該能夠自己找到所有這些問題的解決方案，而不必每次都問堆棧溢出。我怎樣才能找到要覆蓋樣式的類？我已經嘗試使用#1的CSS總覽，但無法做出我想要的改變:

# # #要實現所需的定制，可以進行以下修改:

調整FormControl的muoutlineinput-notched outline樣式:

sx={{
  minWidth: 120,
  backgroundColor: "#eb6060",
  borderRadius: "5px",
  border: "1px solid #eb6060",
  '& .MuiOutlinedInput-notchedOutline': {
       border: 'none',
   },
   '&:hover .MuiOutlinedInput-notchedOutline': {
       border: 'none',
   },
   '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
       border: 'none',
   },
}}

在這里，FormControl的muoutlineinput-notched outline樣式已經過調整，當焦點不在內容上、不在內容上或焦點不在內容上時，它會移除輪廓邊框。

編輯:當您遇到問題或旨在滿足特定要求時，您可以遵循以下方法:

方法1:文檔探索 解決問題最可靠的方法之一是徹底檢查所使用的庫或框架提供的文檔。盡管這種方法可能需要一些時間和精力，但它被認為是最佳的行動方案。此外，如果將來出現任何復雜情況，依靠官方文檔可以確保我們的代碼得到庫的維護者的支持。

方法2:瀏覽器檢查工具的使用 快速方法是使用瀏覽器檢查工具來檢查元素的結構和應用于它的CSS。通過檢查元素，您可以看到您的CSS是應用于元素還是被其他CSS覆蓋。

例如，您可以在瀏覽器檢查器中看到解決您的第一個問題的CSS。

后續問題的解決方案:

調整FormControl的樣式:

sx={{ minWidth: 120,
    backgroundColor: "#eb6060",
    borderRadius: "5px",
    border: "1px solid #eb6060",
    '& .MuiOutlinedInput-notchedOutline': {
        border: 'none',
    },
    '&:hover .MuiOutlinedInput-notchedOutline': {
        border: 'none',
    },
    '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
        border: 'none',
    },
    '& .MuiSelect-select': {
        color: '#FFF' // remove the blue highlight on select component label
    },
    '& .Mui-focused .MuiSelect-select': {
        backgroundColor: '#e84545' // Slightly darken the select button's background when menu is opened
    }
}}

調整菜單項的樣式:

sx={{ 
    '&.Mui-selected.Mui-focusVisible': {
        backgroundColor: '#FFF' //Set the highlight color to white on the first menu item when the menu opens
    }
}}