如何更改材質ui圖標的大小和顏色？

Question

我正在使用 Material ui 中的 CircularProgress-Icon。 我想更改以下屬性：

1. 尺寸
2. 顏色。

相關代碼如下所示：

const useStyles = makeStyles({
  button: {
    color: 'white',
    fontSize: 15,
  },
});

<CircularProgress className={classes.button} />

顏色工作正常，但調整大小不起作用。 我也試過“大小：15”和“高度：15，寬度：15”。 但沒有任何效果。 任何建議為什么？ 非常感謝！！

Answer 1

我嘗試了尺寸，但它不適合我......所以我這樣做了。

const styles = {
  activity: { height: 100, width: 100 },
};

const LoadingIndicator = (props) => {
  return <CircularProgress style={styles.activity} {...props} />;
};

新的

這行得通

<CircularProgress {...props} size={30} />

Answer 2

有一種 hacky 方式，它需要你用一個固定的高度/寬度 div 包裹你的循環進度。 像這樣的東西：

const useStyles = makeStyles((theme) => ({
  root: {
    display: "flex",
    "& > * + *": {
      marginLeft: theme.spacing(2)
    },
    width: 300,
    height: 300
  }
}));

export default function CircularIndeterminate() {
  const [parentSize, setParentSize] = useState(0);
  const parentRef = useRef(null);

  useEffect(() => {
    const { clientHeight, clientWidth } = parentRef.current;

    setParentSize(Math.min(clientHeight, clientWidth));
  }, []);
  const classes = useStyles();

  return (
    <div className={classes.root} ref={parentRef}>
      <CircularProgress size={0.8 * parentSize} />
    </div>
  );
}

你可以在這里玩弄它。