Reactjs 带有“反应-样式”按钮的材质UI v1

我正在尝试学习如何使用材料界面与反应

我已经在我的项目中加入了材料UI的v1

我对编码没有任何直观的了解，因此我很难填补文档中留下的线索之间的空白

我知道我还没有掌握这方面的诀窍，但将其他人能够做到的事情拼凑在一起，我在我的项目中设置了一个按钮，如下所示：

import React from 'react';
import Button from 'material-ui/Button';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import { fade } from 'material-ui/styles/colorManipulator';

const MyButton = (props) => {

    return <span>
        <Button  {...props} />   
    </span>
};

export default MyButton;

从“React”导入React；
从“物料界面/按钮”导入按钮；
从“道具类型”导入道具类型；
从“材质ui/样式”导入{withStyles}；
从“材质ui/styles/colorManipulator”导入{fade}；
常量MyButton=（道具）=>{
返回
};
导出默认MyButton；

然后我尝试在几个地方使用我的按钮：

import React from 'react';
import MyButton from '../materialui/Button.js';

const style = {
    background: '#FF5349',
    color: 'white',
    padding: '0 30px',
    // marginBottom: '30px',

  };


  const Start = () => (
      <span>
        <MyButton style={style} size="large">
            GET STARTED 
        </MyButton>

    </span>

);

export default Start;  

从“React”导入React；
从“../materialui/Button.js”导入MyButton；
常量样式={
背景：“#FF5349”，
颜色：'白色'，
填充：“0 30px”，
//marginBottom:'30px'，
};
常量开始=（）=>(
开始
);
导出默认启动；

我正试图改变按钮的大小

Material UI文档表明，我应该能够通过插入size=“large”来切换size属性

文件中给出的示例为：

<Button size="large" className={classes.button}>
          Large
        </Button>

大的

我尝试在我的开始组件的const样式中插入size=“large”，在开始组件和按钮组件本身中使用MyButton。这些尝试都无法改变大小。按钮中的文本标签目前看起来很小，我不知道如何控制大小

---

有人能看到如何增加按钮的大小吗？

下面是我如何使用它的

您需要设置button对象的根类（或其他可用类，请参阅文档中每个可用类的组件）

import React，{Component}来自“React”；
从“材质ui/样式”导入{withStyles}；
从“物料界面/按钮”导入按钮；
常量样式=主题=>({
按钮：{
宽度：“300px”，
边距：“0自动”，
textTransform:“大写”，
填充：“20px 30px”，
对准自己：“居中”，
},
});
类MyCustomButton扩展组件{
render（）{
const{classes}=this.props；
返回(
);
}
}
导出默认样式（样式）（MyCustomButton）；

您的示例在中运行良好。你确定，你的浏览器使用最新生成的js文件吗？啊，我明白了。我不得不使用3种尺寸来查看变化。我正在寻找一个属性来更改标签中的字体大小。很抱歉我真傻。谢谢

import React, { Component } from "react";
import { withStyles } from "material-ui/styles";
import Button from "material-ui/Button";

const styles = theme => ({
  button: {
    width: "300px",
    margin: "0 auto",
    textTransform: "uppercase",
    padding: "20px 30px",
    alignSelf: "center",
  },
});


class MyCustomButton extends Component {

  render() {
    const { classes } = this.props;
    return (
      <Button color="primary" raised={true} classes={{ root: classes.button }} />
    );
  }
}

export default withStyles(styles)(MyCustomButton);