IMPROVEMENT: partial migration @mui/styles to tss-react (#1338)

This commit is contained in:
Caldwell
2024-06-03 18:27:13 +02:00
committed by GitHub
parent e622b9b904
commit cb92643c7e
44 changed files with 545 additions and 604 deletions
+30 -33
View File
@@ -4,42 +4,39 @@ import Box from "@mui/material/Box";
import IconButton from "@mui/material/IconButton";
import Fade from "@mui/material/Fade";
import M from "@mui/material/Modal";
import createStyles from "@mui/styles/createStyles";
import makeStyles from "@mui/styles/makeStyles";
import { makeStyles } from "tss-react/mui";
import { SxProps } from "@mui/system";
import CloseIcon from "@mui/icons-material/Close";
const useStyles = makeStyles((theme: Theme) =>
createStyles({
modal: {
display: "flex",
alignItems: "center",
justifyContent: "center",
const useStyles = makeStyles()((theme: Theme) => ({
modal: {
display: "flex",
alignItems: "center",
justifyContent: "center",
},
paper: {
position: "relative",
backgroundColor: theme.palette.background.default,
border: "2px solid " + theme.palette.primary.main,
boxShadow: `0px 3px 5px -1px ${theme.palette.primary.dark},0px 5px 8px 0px ${theme.palette.primary.dark},0px 1px 14px 0px ${theme.palette.primary.dark}`,
padding: 2,
maxWidth: "80%",
maxHeight: "80%",
overflow: "auto",
"&::-webkit-scrollbar": {
// webkit
display: "none",
},
paper: {
position: "relative",
backgroundColor: theme.palette.background.default,
border: "2px solid " + theme.palette.primary.main,
boxShadow: `0px 3px 5px -1px ${theme.palette.primary.dark},0px 5px 8px 0px ${theme.palette.primary.dark},0px 1px 14px 0px ${theme.palette.primary.dark}`,
padding: 2,
maxWidth: "80%",
maxHeight: "80%",
overflow: "auto",
"&::-webkit-scrollbar": {
// webkit
display: "none",
},
scrollbarWidth: "none", // firefox
},
closeButton: {
position: "absolute",
right: 3,
top: 3,
width: 20,
height: 20,
},
}),
);
scrollbarWidth: "none", // firefox
},
closeButton: {
position: "absolute",
right: 3,
top: 3,
width: 20,
height: 20,
},
}));
interface ModalProps {
open: boolean;
@@ -49,7 +46,7 @@ interface ModalProps {
}
export const Modal = ({ open, onClose, children, sx }: ModalProps): React.ReactElement => {
const classes = useStyles();
const { classes } = useStyles();
const [content, setContent] = useState(children);
useEffect(() => {
if (!open) return;