Question

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

尺寸
颜色。

相关代码如下：

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

<CircularProgress className={classes.button} />

颜色工作正常，但调整大小不起作用。我也试过“尺寸：15”和“高度：15，宽度：15”。但没有任何作用。任何建议为什么？非常感谢！！

Answer 1

我试过这个尺寸，但它不适合我......所以我是这样做的。

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

新

这有效

yarn

Answer 2

有一种hacky方式，它需要你用固定的高度/宽度div包裹你的circularprogress。像这样：

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>
  );
}

你可以玩它here。

如何更改材质 ui 图标的大小和颜色？

2 个答案: