我正在嘗試自定義MUI文本字段中向上/向下微調按鈕的外觀。

我試著讓箭頭變成白色，周圍的區域變成黑色，再大一點，就像這樣:

我知道我需要更改input::-WebKit-outer-spin-button，input::-WebKit-inner-spin-button，但是我不知道要使用哪些屬性。

您可以通過sx prop在TextField組件中直接傳遞屬性:

<TextField
        type="number"
        sx={{
          "input[type=number]::-webkit-outer-spin-button": {
            ...spinnerStyles
          },
          "input[type=number]::-webkit-inner-spin-button": {
            ...spinnerStyles
          }
        }}
      />

或者您可以通過TextField的InputProps屬性傳遞它們，如下所示:

<TextField
        type="number"
        InputProps={{
          type: "number",
          sx:{
            "input[type=number]::-webkit-outer-spin-button": {
              ...spinnerStyles
            },
            "input[type=number]::-webkit-inner-spin-button": {
              ...spinnerStyles
            }
          }
        }}
      />

編輯請求的樣式 來設計微調按鈕本身的樣式

工作[更新]代碼沙盒:https://codesandbox.io/s/romantic-knuth-j0n5lw?文件=/demo.tsx:961-1290