Reactjs 如何定制 React 热 toastr

发布于11月15日

也许这是一个幼稚的问题，但我不明白这个语法，为什么不在这里返回一个组件？

// src/@core/styles/libs/react-hot-toast

const ReactHotToast = styled(Box)<BoxProps>(({ theme }) => {
    // ** Hook & Var
    const { settings } = useSettings()
    const { layout, navHidden } = settings

    return {
        '& > div': {
            left: `${theme.spacing(6)} !important`,
            right: `${theme.spacing(6)} !important`,
            bottom: `${theme.spacing(6)} !important`,
            top:
                layout === 'horizontal' && !navHidden
                    ? '139px !important'
                    : '75px !important',
        },
        '& .react-hot-toast': {
            fontWeight: 400,
            borderRadius: 8,
            fontSize: '1rem',
            letterSpacing: '0.14px',
            boxShadow: theme.shadows[3],
            zIndex: theme.zIndex.snackbar,
            color: theme.palette.text.primary,
            background: theme.palette.background.paper,
            '&>:first-of-type:not([role])>:first-of-type': {
                width: 14,
                height: 14,
            },
        },
    }
})

在_app.tsx分钟内，它在这里装载，并通过

// ** Styled Components
import ReactHotToast from 'src/@core/styles/libs/react-hot-toast'

//..

<ReactHotToast>
<Toaster
position={settings.toastPosition}
toastOptions={{ className: 'react-hot-toast' }}
/>
</ReactHotToast>

const ReactHotToast = styled(Box)(({ theme }) => { // here probably, (need to check the implementation) // the styled-components is waiting for a return object // that will behave like a CSS style // so you return an object that has key '.react-hot-toast' // and you can use this className in the child components })

const ReactHotToast = styled(Box)<BoxProps>` ${({theme, layout, navHidden}) => ` & > div { left: `${theme.spacing(6)} !important` } & .react-hot-toast { /* other CSS here */ } `} ` const ReactHotToastContainer = ({children}) => { const { settings } = useSettings(); const { layout, navHidden } = settings return <ReactHotToast layout={layout} navHidden={navHidden}>{children}</ReactHotToast>; }

Reactjs 如何定制 React 热 toastr

推荐答案

Reactjs相关问答推荐

如何等待我的插入内容提交后再继续执行指令？

使用Reaction钩子窗体验证可选字段

使用筛选器的Primereact DataTable服务器端分页？

基本react 应用程序正在触发两次Use Effect

Reaction路由DOM v6不包含上下文(Supabase)

透明MOV文件未出现在我的React网页中

蚂蚁 Select .列表弹出窗口不会'；有时不会出现

Github 操作失败：发布 NPM 包

使用 MUI 菜单时添加新 html 元素时布局意外滚动跳转

无法在 NextJS 中获取嵌套对象

如何使用 App Router 和服务器组件在 Next.js 13 中实现分页

获取更多数据后更新 DOM，而不刷新 React.js 中的页面

i18next中复数键的理解

VideoSDK api 不使用更新状态

从服务器获取数据时未定义，错误非法调用

我如何在所有组件中使用 Chakra UI toast？

在 redux 中分派到另一个减少时状态值不会改变

如何在自定义 JSX 元素上声明属性？

在 Redux 中更新布尔状态时出错

将 C# Razor 条件块转换为 React.js 代码