CODEWITHSUNDEEP
reactjsmaterial-ui
Mel
Mel

Reputation: 2685

Material UI v1 with React - styling buttons

I'm trying to learn how to use Material UI with React.

I have incorporated v1 of Material UI in my project.

Nothing about coding comes intuitively to me, so I struggle to fill the gaps between the clues left in the documentation for resources.

I know I haven't got the hang of this yet, but piecing together what others have been able to do, I have set up a button in my project, as follows:

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;

I then try to use my button in a couple of places:

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;

I am trying to change the size of the button.

The Material UI documentation indicates that I should be able to toggle the size property by inserting size="large".

The example given in the documentation is:

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

I've tried to insert size="large" in the const style in my Start component, in the use of MyButton in the start component and in the Button component itself. None of these attempts do anything to alter the size. The text label in the button looks miniature at the moment and I can't figure out how to manipulate the size.

Can anyone see how to increase the size of the button?

Upvotes: 0

Views: 2578

Answers (1)

Adrien
Adrien

Reputation: 342

Here is how I have been using it.

You need to set the root Class of the button object (or another available class, refer to the documentation for each available class by components)

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

Upvotes: 1

Related Questions