Jak przekazać rekwizyty Wartość wypełnienia do Keyframe Makeestyles '? Czy muszę określić państwa początkowe, aby przekazać Prop?

Działa dla koloru, ale nie działa dla 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>
  );
}

1
ZeroPanda 7 październik 2020, 00:31

1 odpowiedź

Najlepsza odpowiedź

Odpowiedź na to jest - nie możesz (przynajmniej na razie). Jest to błąd od tego pisania (najnowsze wydanie MUI to v4.11.0 na ten temat) i jest potwierdzony przez jednego z autorskich autorów MUI. Możesz śledzić jego postępy w tej kwestii: https://github.com/mui -ORG / Material-Ui / problemy / 21011

Będziesz musiał znaleźć inne środki przekazywania tych rekwizytów bez użycia klatek kluczowych

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>
1
95faf8e76605e973 6 październik 2020, 22:28