Skip to content

Instantly share code, notes, and snippets.

@carrieforde
Created July 21, 2022 21:13
Show Gist options
  • Save carrieforde/e5d120d06cf2d18a0b2723e6ac8a7114 to your computer and use it in GitHub Desktop.
Save carrieforde/e5d120d06cf2d18a0b2723e6ac8a7114 to your computer and use it in GitHub Desktop.
MUI snippets / utility components
import { Box, Paper, PaperProps, styled } from "@mui/material";
import React, { FormEvent, ReactNode } from "react";
import { StyledForm, FormBody } from "./Form.styles";
export const StyledForm = styled(Paper)<PaperProps & { component: string }>(
({ theme }) => ({
display: "flex",
flexDirection: "column",
gap: theme.spacing(2),
padding: theme.spacing(3),
maxWidth: "100%",
width: "500px",
})
);
export const FormBody = styled(Box)(({ theme }) => ({
display: "flex",
flexDirection: "column",
gap: theme.spacing(3),
marginBottom: theme.spacing(3),
}));
export type FormProps = {
title: string;
children: ReactNode;
actions: ReactNode;
onSubmit: (e: FormEvent) => void;
};
export const Form: React.FC<FormProps> = ({
title,
children,
actions,
onSubmit,
}) => (
<StyledForm component="form" onSubmit={onSubmit}>
<Typography component="h1" variant="h6" mb={1} textAlign="center">
{title}
</Typography>
<FormBody>{children}</FormBody>
<Box>{actions}</Box>
</StyledForm>
);
import { Box, styled } from '@mui/material'
export const TextOverflowContainer = styled(Box)({
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap'
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment