使用 React 的材质 UI答案

【问题标题】：Material UI with React使用 React 的材质 UI
【发布时间】：2018-07-31 14:14:32
【问题描述】：

我正在尝试弄清楚如何将 Material UI 与 React 结合使用。

我已经安装了模块并尝试创建一个按钮组件。

我有：

Button.js

import React from 'react';
import FlatButton from 'material-ui/FlatButton';

const style = {
  margin: 12,  
};

const MyButton = () => (
    <div>
        <FlatButton  />


    </div>
);

export default MyButton;

现在，我正在尝试将 Button 与我的特定元素的输入一起使用。

在我的 Landing.js 组件中，我有：

import React from 'react';
import MyButton from './materialui/Button.js';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';

const Landing = () => (

  <div className="hero">
    Projects
    <p className="tagline">Create project</p>
    <MuiThemeProvider>
      <MyButton
        secondary={true}
        backgroundColor="$navy"
        hoverColor="$green"
        label="GET STARTED"

      />
    </MuiThemeProvider>
  </div>

);

export default Landing;

但是，当我尝试此操作时，我收到一条错误消息：

警告：道具类型失败：必需的道具标签或子项或图标是未在 FlatButton 中指定。

如果我在按钮中添加标签，那么每次我想更改标签时都需要制作不同的按钮。有没有办法可以在我想使用按钮的组件中定义样式和标签？ Material UI 上的示例似乎显示了以这种方式使用的按钮，但我看不到让它设置工作缺少什么。

【问题讨论】：

如果您刚刚开始使用 material-ui，您应该在深入了解项目之前switch to v1。 v0 名义上是稳定版本，但在接下来的几周内应该会发生变化，因此建议所有新项目都使用 v1。
谢谢@JulesDupont - 你有没有找到任何关于如何定制它的教程？我无法理解文档。
自定义是什么意思？更改主题或将样式应用于单个组件？

标签： javascript reactjs material-ui

【解决方案1】：

有没有办法可以在组件中定义样式和标签我想使用按钮吗？

是的，您可以，问题是您从Landing 组件传递道具中的值，但没有在 MyButton 组件内部使用。查看您在 props 中从父级传递的任何值都不会直接应用。

这样写：

const MyButton = props => (
    <div>
        <FlatButton  {...props} />
    </div>
);

现在您从父级传递的所有值都将传递给FlatButton。

注意：

{...props} 所有的 props 值都将传递给 FlatButton，但如果你想传递一些特定的值而不是全部，则使用解构并取出这些值然后传递。

像这样：

const MyButton = props => {
    const {label, backgroundColor, hoverColor, secondary=false} = props;
    return <div>
        <FlatButton  {...{label, backgroundColor, hoverColor, secondary}} /> 
    </div>
};

【讨论】：

谢谢。我试过这个，但收到一个错误消息：警告：道具类型失败：FlatButton 中未指定必需的道具标签或子项或图标。一定有什么我错过了。您知道我在哪里可以找到有关其工作原理的详细示例吗？
当我尝试您的第二个示例时，我收到一条错误消息：warning.js:33 Warning: Unknown props a, b, c on
您是否从所有地方传递MyButton 中父级的所有值（与您在问题中显示的方式完全相同）？第二种方式是一个示例，您应该将 a.b.c 替换为实际的键名（您从父组件传递）
是的 - 帖子中的所有内容都完全来自代码。我尝试对 abc 进行变体，以使用材质 UI 和 props.materialUIexactname 中的确切名称。都没有奏效。我找不到有效的示例。
感谢@Mayank 试图帮助我，我希望我能理解这一点。当我尝试使用您给我的示例时，我收到错误消息：警告：

【解决方案2】：

我看到你仍然有问题。因此，以简单的方式详细发布，以使您更好地理解。如果您了解传播运算符，另一个答案也很好。这是另一种做法。

您看到此警告的原因。顺便说一句，这不是错误，而是警告:)

警告：道具类型失败：FlatButton 中未指定必需的道具标签或子项或图标。

因为，FlatButton 至少需要一个 prop，即 label/childern/icon，但您调用时没有一个 prop。因此，我们应该将 label 属性传递给 FlatButton 以查看按钮上的名称。 check here 了解更多详情。

现在，您已经将正确的道具传递给 MyButton 组件，但问题是您没有在 MyComponent 中接收这些道具并将其传递给 FlatButton。我建议您在 MyButton 中接收道具并将其传递给 FlatButton。

我清理了你的代码，请看一下

接收道具并将其传递给FlatButton

import React from 'react';
import FlatButton from 'material-ui/FlatButton';

const style = {
  margin: 12,  
};

const MyButton = (props) => (
    <div>
        <FlatButton  label={props.label} backgroundColor={props.backgroundColor} hoverColor={props.hoverColor} secondary={props.secondary}/>
    </div>
);

export default MyButton;

【讨论】：