传递道具不起作用 Material UI 做出反应答案

【问题标题】：Passing props not working Material UI react传递道具不起作用 Material UI 做出反应
【发布时间】：2021-08-28 03:02:25
【问题描述】：

我试图传递一个道具来修改按钮样式。在这种情况下，我希望按钮为“蓝色”，背景颜色为“橙色”。

我在调用Button的时候传入了cool="true"，但是按钮还是"yellow"中的"red"，好像cool状态为false..

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";

/* This is an example of passing props */
const useStyles = makeStyles({
  buttonStyle: (props) => {
    return {
      color: props.cool ? "blue" : "red",
      backgroundColor: props.cool ? "orange" : "yellow",
    };
  },
});

function App(props) {
  const classes = useStyles(props);
  console.log(classes);
  return (
    <>
      <Button cool="true" className={classes.buttonStyle}>
        Click me!
      </Button>
    </>
  );
}

export default App;

感谢您的回答。下面解决问题。我想知道是否可以在

function App() {
  const classes = useStyles({ cool: true });
  console.log(classes);
  return (
    <>
      <h1 className={classes.textStyle}>Let's roll this app out.</h1>
      <Button className={classes.buttonStyle}>Click me!</Button>
    </>
  );
}

【问题讨论】：

标签： reactjs react-native material-ui

【解决方案1】：

如果要使用组件 props 更新按钮的样式，则创建一个单独的组件，根据 props 更改按钮的样式。

CoolButton.jsx

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";

/* This is an example of passing props */
const useStyles = makeStyles({
  buttonStyle: (props) => {
    return {
      color: props.cool ? "blue" : "red",
      backgroundColor: props.cool ? "orange" : "yellow"
    };
  }
});

function CoolButton({ cool }) {
  const classes = useStyles({ cool });
  return (
    <>
      <Button className={classes.buttonStyle}>Click me!</Button>
    </>
  );
}

export default CoolButton;

App.js

import CoolButton from "./CoolButton";

function App(props) {
  return (
    <>
      <CoolButton cool="true">Click me!</CoolButton>
    </>
  );
}

export default App;

https://codesandbox.io/s/cool-button-8its7

如果您需要进一步的支持，请告诉我。

【讨论】：

【解决方案2】：

要将道具传递给您的样式，您应该将道具直接传递给 useStyles 方法：

const classes = useStyles(props);

或

const classes = useStyles({ someSpecificProp });

【讨论】：

嗯，我添加了const classes = useStyles(props) 并没有解决问题？
查看这个例子 - material-ui.com/styles/basics/#adapting-based-on-props
const classes = useStyles({ cool: true })
是的！这确实解决了问题。有没有办法把它写在
嗯，我不确定你的情况，但你可以创建自己的 Button 组件并在那里添加这个逻辑。

【解决方案3】：

试试这个：

const useStyles = props => makeStyles({
  buttonStyle: {
      color: props.cool ? "blue" : "red",
      backgroundColor: props.cool ? "orange" : "yellow",
  },
});

并称它为：

const classes = useStyles(props)();

【讨论】：