您可以做的是将多个CircularProgress组件相互叠加，并相应地定位它们。大概是这样的：

import React from "react";
import ReactDOM from "react-dom";
import { Box, Typography, CircularProgress } from "@material-ui/core";

function App() {
  return (
    <Box
      sx={{
        height: "100vh",
        display: "flex",
        justifyContent: "center",
        alignItems: "center"
      }}
    >
      <Box sx={{ position: "relative" }}>
        <Box
          sx={{
            position: "absolute",
            top: 0,
            bottom: 0,
            margin: "auto",
            zIndex: 0,
            color: "#f3f3f3"
          }}
        >
          <CircularProgress
            variant="determinate"
            color="inherit"
            value={100}
            thickness={3}
            size={100}
          />
        </Box>
        <Box
          sx={{
            position: "absolute",
            top: 0,
            bottom: 0,
            margin: "auto",
            zIndex: 1,
            color: "red"
          }}
        >
          <CircularProgress
            variant="determinate"
            color="inherit"
            value={30}
            thickness={3}
            size={100}
          />
        </Box>
        <Box
          sx={{
            position: "absolute",
            top: 0,
            bottom: 0,
            margin: "auto",
            zIndex: 2
          }}
        >
          <CircularProgress
            variant="determinate"
            value={25}
            thickness={3}
            size={100}
          />
        </Box>
        <Box
          sx={{
            position: "absolute",
            top: 32,
            left: 32,
            zIndex: 2
          }}
        >
          <Typography color="primary" variant="h5">
            25%
          </Typography>
        </Box>
      </Box>
    </Box>
  );
}

ReactDOM.render(<App />, document.querySelector("#app"));

最终结果是你想要的：circular progress dual tone
代码沙盒链接：https://codesandbox.io/s/determined-wu-dtwy7y