时间戳

首页 > 解决方案 > 在 makeStyles 关键帧动画中传递道具

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

问题描述

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

它适用于颜色，但不适用于填充值。

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

标签： reactjsmaterial-ui

解决方案

答案是——你不能（至少现在）。这是撰写本文时的一个错误（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>

推荐阅读