带有 React 的 Material UI v1 - 样式按钮答案

【问题标题】：Material UI v1 with React - styling buttons带有 React 的 Material UI v1 - 样式按钮
【发布时间】：2018-08-03 00:02:42
【问题描述】：

我正在尝试学习如何将 Material UI 与 React 结合使用。

我在我的项目中加入了 v1 的 Material UI。

编码对我来说没有任何直觉，因此我努力填补资源文档中留下的线索之间的空白。

我知道我还没有掌握这个窍门，但是拼凑其他人已经能够做到的，我在我的项目中设置了一个按钮，如下：

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;

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

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;

我正在尝试更改按钮的大小。

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

文档中给出的例子是：

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

我尝试在 Start 组件中的 const 样式中插入 size="large"，在 start 组件中使用 MyButton 和在 Button 组件本身中。这些尝试都没有改变大小。按钮中的文本标签目前看起来很小，我不知道如何操作大小。

谁能看到如何增加按钮的大小？

【问题讨论】：

您的示例在this codesandbox 中运行良好。你确定，你的浏览器使用的是最新生成的js文件吗？
啊 - 我明白了。我必须使用 3 种尺寸才能看到变化。我正在寻找一个属性来更改标签中的字体大小。对不起。我真傻。谢谢

标签： reactjs material-ui

【解决方案1】：

这是我一直在使用它的方式。

您需要设置按钮对象的根类（或另一个可用的类，请参阅每个组件的可用类的文档）

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

【讨论】：