CODEWITHSUNDEEP
reactjsmaterial-ui
HABosch
HABosch

Reputation: 49

How do I extend Material-UI Button and create my own button component

I am a React newbie. Using Material-UI / React, how can I create my own Button component? Ideally, I would like the component to encapsulate certain properties.

Here is my code.

export const Button = withSytles((theme) => ({
    root: {
        backgroundColor: theme.palette.primary.main,
        minWidth: '100px',
    }
}))(MaterialButton);

This code is working however, is there a way to have the component employ all of the properties when I use color="primary" to the Material-UI Button. Do I need to include ALL of the properties or is there an easier way.

Also, I am sure using 100px is not the correct way for this control to be responsive. Is 100em correct or should I use something different?

Upvotes: 2

Views: 3637

Answers (2)

Sandip Nirmal
Sandip Nirmal

Reputation: 2459

You can create custom variant as mentioned by @NearHuscarl other way you can create component modifying style.

Something like.

import { makeStyles } from '@material-ui/core/styles'
import Button from '@material-ui/core/Button'
import PropTypes from 'prop-types'

const useStyles = makeStyles((theme) => ({
  root: {
    height: '48px',
    width: '100%',
    backgroundColor: '#232323',
    color: '#fff',
    fontSize: '16px',
    borderRadius: '4',
    minHeight: theme.spacing(6),
    '&:hover, &:active, &:focus': {
      backgroundColor: `rgba(0, 0, 0, 0.8)`,
    },
    '&.Mui-disabled': {
      opacity: 0.75,
    },
  },
}))

const propTypes = {
  loading: PropTypes.bool,
}

function PrimaryButton({ children, loading = false, ...props }) {
  const classes = useStyles()

  return (
    <Button
      variant="contained"
      className={classes.root}
      disabled={loading}
      {...props}
    >
      {children}
    </Button>
  )
}

PrimaryButton.propTypes = propTypes

export default PrimaryButton

Created code sandbox

https://codesandbox.io/embed/boring-mayer-cjl0f?fontsize=14&hidenavigation=1&theme=dark

Upvotes: 1

NearHuscarl
NearHuscarl

Reputation: 81290

This is possible in Material-UI v5, you can create a custom variant for your Button. A variant is just a specific styles of a component, each variant is identified by a set of component props. See the example below:

const defaultTheme = createMuiTheme();

const theme = createMuiTheme({
  components: {
    MuiButton: {
      variants: [
        {
          props: { color: "primary", variant: "contained" },
          style: {
            backgroundColor: defaultTheme.palette.primary.main,
            fontSize: 20,
            minWidth: "200px"
          }
        },
        {
          props: { color: "secondary", variant: "contained" },
          style: {
            backgroundColor: defaultTheme.palette.secondary.main
          }
        }
      ]
    }
  }
});

When you render this component:

<Button color="primary" variant="contained">
  Primary
</Button>

The first variant style specified above is used because they have the same props:

{ color: "primary", variant: "contained" }

Live Demo

Edit 67282009/how-do-i-extend-material-ui-button-and-create-my-own-button-component-for-react

Upvotes: 2

Related Questions