带React样式按钮的Material UI v1

admin

我正在尝试学习如何在React中使用Material UI。

我已经在我的项目中加入了v1 of 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;

我正在试着改变按钮的大小。

材料UI文档指出，我应该能够通过插入size="large“来切换size属性。

文档中给出的示例如下：

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

我尝试在Start组件的const样式中插入size="large“，在start组件中使用MyButton，并在Button组件本身中插入。这些尝试都不会改变大小。按钮中的文本标签目前看起来很小，我想不出如何控制大小。

有谁知道如何增加按钮的大小吗？

转载请注明出处:http://www.033230.com/article/20230331/1190986.html