#javascript #reactjs #typescript #material-ui
#язык JavaScript #реагирует на #машинописный текст #материал-пользовательский интерфейс
Вопрос:
Я пытаюсь расположить закусочную справа вверху с помощью некоторых настроек top:, но я не могу установить ее правильно.
Вот моя попытка:
import React from "react"; import { Snackbar, Alert } from "@mui/material"; import { styled } from "@mui/material/styles"; const StyledSnackbar = styled(Snackbar)(({ theme, props }) =gt; ({ "amp; MuiSnackbar-root": { top: theme.spacing(15), }, })); export default function Notification(props) { const { notify, setNotify } = props; return ( lt;StyledSnackbar open={notify.isOpen} autoHideDuration={3000} anchorOrigin={{ vertical: "top", horizontal: "right" }} gt; lt;Alert severity={notify.type}gt;{notify.message}lt;/Alertgt; lt;/StyledSnackbargt; ); } Затем я попытался
const StyledSnackbar = styled(Snackbar)(() =gt; ({ "amp; MuiSnackbar-root": { top: "100px", }, })); Но это все еще не работает, закусочная закреплена вверху/справа
Ответ №1:
Я, наконец, понял это, но я не уверен, что это лучший способ его реализации. пожалуйста, дайте мне знать ваши мысли? и если есть лучший способ сделать это.
import React from "react"; import { Snackbar, Alert } from "@mui/material"; import { styled } from "@mui/material/styles"; const StyledSnackbar = styled((props) =gt; lt;Snackbar {...props} /gt;)( ({ theme }) =gt; ({ "amp; .MuiSnackbar-root": { top: theme.spacing(15), }, }) ); export default function Notification(props) { const { notify, setNotify } = props; return ( lt;StyledSnackbar open={notify.isOpen} autoHideDuration={3000} anchorOrigin={{ vertical: "top", horizontal: "right" }} gt; lt;Alert severity={notify.type}gt;{notify.message}lt;/Alertgt; lt;/StyledSnackbargt; ); }