CODEWITHSUNDEEP
material-ui
Chris Hunter-Johnson
Chris Hunter-Johnson

Reputation: 606

Custom size material-ui button

I am usimng material-ui with NextJs and would like a button about 4x the width of a large button. The width property does not seem to have any effect

The Component

export function ShiButton(props) {
const classes = useStyles();

const {
    path,
    text,
    colour = "primary",
    variant = "contained",
    size = "large",
} = props;
return (
    <Link href={path} passHref>
        <Button size={size} variant={variant} color={colour} width={900}>
            {text}
        </Button>
    </Link>
);

} Calling page

    <ShiButton path="\" text="Sign-up" size="large" />

Upvotes: 2

Views: 5389

Answers (2)

Michael Mudge
Michael Mudge

Reputation: 439

I'm using MUI v5 and a custom theme, and accomplished creating a custom reusable button with a larger size by creating a new variant xlarge based on the size prop.

So in my custom theme object

{
  ...otherThemeStuff,
  components: {
    MuiButton: {
      variants: [
        {
          props: { size: 'xlarge' },
          style: {
            padding: '14px 28px'
          },
        },
      ],
    }
  }
}

Then in my component I can use the button like this

<Button size='xlarge'>My button</Button>

Upvotes: 5

95faf8e76605e973
95faf8e76605e973

Reputation: 14201

You can use Material-UI's styling solution in your app :

This is the CSS for the large button

enter image description here

So just increase padding and/or font-size by X to achieve greater width

const useStyles = makeStyles({
  FourTimesLargeBtn: {
    padding: "32px 88px",
    fontSize: "3.75rem"
  }
});

function ShiButton(props) {
  const classes = useStyles();

  const {
    path,
    text,
    colour = "primary",
    variant = "contained",
    size = "large"
  } = props;
  return (
    <Link href={path}>
      <Button
        classes={{ root: classes.FourTimesLargeBtn }}
        size={size}
        variant={variant}
        color={colour}
        width={900}
      >
        {text}
      </Button>
    </Link>
  );
}

function App() {
  return <ShiButton text="Hello" />;
}


ReactDOM.render(<App/>, document.getElementById("root"));
<div id="root"></div>

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js"></script>

<script type="text/babel">
  const { Button, makeStyles, Link } = MaterialUI;
</script>

Upvotes: 2

Related Questions