Question

如何将道具填充值传递给makeStyles的关键帧？我必须指定初始状态才能通过道具吗？

它适用于颜色，但不适用于fillvalue。

---Child component

const useStyles = makeStyles({
      progress: {
            animation: '$load 3s normal forwards',
            background: props => props.color,
            width: '0',
            },

      "@keyframes load": {
            "0%": { width: "0" },
            "100%": { width: props => props.fillvalue}
            }
});

export default function ProgressBar(props) {
      const propsStyle = {color: props.color, fillvalue: props.fillvalue}
      const classes = useStyles(propsStyle)
      
      return(
            <div>
                  <div className={classes.progress}>
                  </div>
            </div>
      );
}


---Parent

function App() {
  return (
    <div>
      <ProgressBar color="#000" fillvalue = "60%"/>
    </div>
  );
}

Answer 1

答案是-您不能（至少目前如此）。在撰写本文时，这是一个错误（撰写本文时，MUI最新版本为v4.11.0），并且得到MUI贡献者之一的承认。您可以在以下问题上跟踪其进度：https://github.com/mui-org/material-ui/issues/21011

您将不得不寻找其他方法来传递这些道具而无需使用关键帧

const useStyles = makeStyles({
  progress: {
    height: "10px",
    background: (props) => props.color,
    width: (props) => props.fillvalue,
    transition: "width 3s"
  }
});

function ProgressBar(props) {
  const propsStyle = { color: props.color, fillvalue: props.fillvalue };
  const classes = useStyles(propsStyle);

  return (
    <div>
      <div className={classes.progress}></div>
    </div>
  );
}

function App() {
  const [fill, setFill] = React.useState("0%");

  return (
    <div>
      <button onClick={() => setFill("0%")}>0%</button>
      <button onClick={() => setFill("60%")}>60%</button>
      <ProgressBar color="#aaa" fillvalue={fill} />
    </div>
  );
}

ReactDOM.render(<App/>,document.getElementById("root"));

<body>
  <div id="root"></div>

  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js"></script>

  <script type="text/babel">
    const { makeStyles } = MaterialUI;
  </script>
</body>

在makeStyles关键帧动画中传递道具

1 个答案: