How to make a customisable @material-ui Button ?
1 min readNov 21, 2019
I want to show you the simplest way that you can integrate it into React.js class:
Installation
To install and save in your package.json
dependencies, run:
// with npm
npm install @material-ui/styles// with yarn
yarn add @material-ui/styles
React Class:
import React, {Component} from "react";
import { styled } from '@material-ui/styles';
import Button from '@material-ui/core/Button';
const MyButton = styled(Button)({
background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
border: 0,
borderRadius: 3,
boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
color: 'white',
height: 48,
padding: '0 30px',
});class AprinClass extends Component {
render() {
return (
<MyButton>Styled Components</MyButton>
)
}
}
export default AprinClass;
More information can be found in: