I came up with the following mystery. Since the MuiSwitch-Track component is not wrapped with in the MuiButtonBase-root who has the Mui-checked status applied, then the following nested code has no effect in the track slot style:

          "& .Mui-checked": {
            "& .MuiSwitch-thumb": {
              backgroundColor: "#4a3e98",
            },
          },

However, when adding the “+” operator to the checked status it begins to take effect on the track slot style:

      "& .Mui-checked+": {
        "& .MuiSwitch-track": {
          backgroundColor: "#9a9a9a",
        },
      },

Moreover, another crazy discovery is when using both .Mui-checked class names for styling the slots because no changes are displayed in the UI.

current code to make the switch component style work:

    sx={{
      "& .Mui-checked": {
        "& .MuiSwitch-thumb": {
          backgroundColor: "#4a3e98",
        },
      },
      "& .Mui-checked+": {
        "& .MuiSwitch-track": {
          backgroundColor: "#9a9a9a",
        },
      },
    }}