javascript - 使用 React 的 Material UI

Question

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

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

我有:

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

但是，当我尝试这样做时，我收到一条错误消息:

Warning: Failed prop type: Required prop label or children or icon was not specified in FlatButton.

如果我在按钮中放置一个标签，那么每次我想要更改标签时都需要制作一个不同的按钮。有没有一种方法可以在我想要使用按钮的组件中定义样式和标签？ Material UI 上的示例似乎显示了以这种方式使用的按钮，但我看不出缺少什么才能使其正常工作。

Answer 1

Is there a way I can define the styling and label in the component that I want to use the button on?

是的，您可以，问题是您从 Landing 组件传递 props 中的值，而不是在 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>
};