时间戳

首页 > 解决方案 > 传递道具不起作用 Material UI 做出反应

reactjs - 传递道具不起作用 Material UI 做出反应

问题描述

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

我在调用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;

感谢您的回答。下面解决问题。我想知道是否可以在 <Button ..> 中包含“cool”修饰符以便更容易阅读，因为 return () 除了按钮之外还有很多部分。

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

标签： reactjsreact-nativematerial-ui

解决方案

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

酷按钮.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;

应用程序.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

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

推荐阅读