@gorazdo/material-you
Version:
Material You theme for @material-ui library
48 lines (47 loc) • 1.68 kB
JavaScript
import { ButtonBase, makeStyles } from "@material-ui/core";
import React from "react";
import clsx from "clsx";
const useStyles = makeStyles((theme) => ({
root: {
padding: theme.spacing(2),
minWidth: theme.spacing(7),
minHeight: theme.spacing(7),
display: "inline-grid",
placeItems: "center",
},
ignorePaddings: {
padding: 0,
},
circle: {
borderRadius: theme.spacing(100),
},
square: {},
rounded: {
borderRadius: theme.shape.borderRadius,
},
text: {
color: theme.palette.text.primary,
},
contained: {
backgroundColor: (props) => theme.palette[props.palette].pale,
color: (props) => theme.palette[props.palette].main,
["&[disabled]"]: {
filter: "grayscale(80%) brightness(105%)",
},
},
label: {
display: "inline-grid",
placeItems: "center",
whiteSpace: "nowrap",
fontSize: "1.4rem",
lineHeight: "1.4rem",
},
}));
export const ShapeButton = ({ shape, className, classes, palette, children, ignorePaddings, variant, ...restProps }) => {
const defaultClasses = useStyles({ palette: palette ?? "primary" });
return (React.createElement(ButtonBase, { ...restProps, className: clsx(defaultClasses.root, {
[defaultClasses[shape]]: shape !== undefined,
[defaultClasses.ignorePaddings]: ignorePaddings,
}, defaultClasses[variant ?? "contained"], classes?.root, className) },
React.createElement("span", { className: clsx(defaultClasses.label, classes?.label) }, children)));
};