提问人：jC61 提问时间：5/30/2023 最后编辑：TylerHjC61 更新时间：8/28/2023 访问量：1187
TypeScript 中的 React-Toastify 样式问题 - 无法为 Toast 容器设置 z-index
React-Toastify Styling Issue in TypeScript - Unable to Set z-index for Toast Container
问：
我目前正在使用 TypeScript 开发一个 React 应用程序，并集成了用于显示通知的 React-Toastify 库。
但是，我在 ToastContainer 组件上遇到了一些样式问题。具体来说，我想将 ToastContainer 的 z-index 设置为 1000，但我尝试使用内联样式执行此操作未成功。
<ToastContainer
style={{ fontSize: "14px", zIndex: "1000" }}
autoClose={2000}
hideProgressBar={true}
/>
尽管将 z-index 设置为 1000，但 ToastContainer 不会像预期的那样显示在其他元素的顶部。我还检查了是否有任何其他 CSS 样式影响组件，但情况似乎并非如此。
我在网上研究了这个问题，并尝试了社区建议的各种解决方案，例如使用全局 CSS 和通过类覆盖样式，但没有一个奏效。
有人可以指导我如何解决 ToastContainer 组件的样式问题并正确设置 z 索引吗？
答：
0赞
Yilmaz
5/30/2023
#1
z-index 仅适用于 position 属性已 显式设置为“绝对”、“固定”或“相对”。
这是注入的元素
<div class="Toastify"></div>
这是 .我没有看到任何设置。如果添加属性，则代码应该可以正常工作divpositionposition
-webkit-text-size-adjust: 100%;
tab-size: 4;
font-feature-settings: normal;
--toastify-color-light: #fff;
--toastify-color-dark: #121212;
--toastify-color-info: #3498db;
--toastify-color-success: #07bc0c;
--toastify-color-warning: #f1c40f;
--toastify-color-error: #e74c3c;
--toastify-color-transparent: rgba(255, 255, 255, 0.7);
--toastify-icon-color-info: var(--toastify-color-info);
--toastify-icon-color-success: var(--toastify-color-success);
--toastify-icon-color-warning: var(--toastify-color-warning);
--toastify-icon-color-error: var(--toastify-color-error);
--toastify-toast-width: 320px;
--toastify-toast-background: #fff;
--toastify-toast-min-height: 64px;
--toastify-toast-max-height: 800px;
--toastify-font-family: sans-serif;
--toastify-z-index: 9999;
--toastify-text-color-light: #757575;
--toastify-text-color-dark: #fff;
--toastify-text-color-info: #fff;
--toastify-text-color-success: #fff;
--toastify-text-color-warning: #fff;
--toastify-text-color-error: #fff;
--toastify-spinner-color: #616161;
--toastify-spinner-color-empty-area: #e0e0e0;
--toastify-color-progress-light: linear-gradient(
to right,
#4cd964,
#5ac8fa,
#007aff,
#34aadc,
#5856d6,
#ff2d55
);
--toastify-color-progress-dark: #bb86fc;
--toastify-color-progress-info: var(--toastify-color-info);
--toastify-color-progress-success: var(--toastify-color-success);
--toastify-color-progress-warning: var(--toastify-color-warning);
--toastify-color-progress-error: var(--toastify-color-error);
line-height: inherit;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
border-width: 0;
border-style: solid;
border-color: #e5e7eb;
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
box-sizing: border-box;
0赞
Ashkan Bahrami
8/25/2023
#2
我有同样的问题。找不到解决方案，所以我只是在吐司发射器上添加了一个边距顶部。（请注意，我使用的是顺风）
toast.success(text, {
position: "top-right",
autoClose: 3000,
hideProgressBar: true,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
theme: "colored",
className: "mt-16",
});
也可以通过添加 className 在 ToastContainer 上执行相同的操作。
评论