html - React - 通知横幅的 Div 被切断
问题描述
我从头开始在 React 中创建了一个通知组件,如果我在新的 React 应用程序中单独使用它,它应该可以正常工作。
我的组件具有以下结构:
import React from "react";
import successIcon from "../../../assets/images/check.svg";
import warningIcon from "../../../assets/images/warning.svg";
import errorIcon from "../../../assets/images/error.svg";
import infoIcon from "../../../assets/images/info.svg";
import "./Notification.css";
const Notification = props => {
let notificationProperties = {};
const {message} = props;
if (Object.keys(message).length > 0) {
switch (props.message.type) {
case 'success':
notificationProperties = {
title: 'Erfolg',
text: props.message.text,
backgroundColor: '#5cb85c',
icon: successIcon
};
break;
case 'error':
notificationProperties = {
title: 'Fehler',
text: props.message.text,
backgroundColor: '#d9534f',
icon: errorIcon
};
break;
case 'warning':
notificationProperties = {
title: 'Warnung',
text: props.message.text,
backgroundColor: '#f0ad4e',
icon: warningIcon
};
break;
case 'info':
notificationProperties = {
title: 'Info',
text: props.message.text,
backgroundColor: '#5bc0de',
icon: infoIcon
};
break;
default:
break;
}
return (
<>
<div className="own-notification-container own-top-right">
<div
className="own-notification own-toast own-top-right"
style={{backgroundColor: notificationProperties.backgroundColor}}>
<div className="own-notification-image">
<img src={notificationProperties.icon} alt=""/>
</div>
<div>
<p className="own-notification-title">
{notificationProperties.title}
</p>
<p className="own-notification-message">
{notificationProperties.text}
</p>
</div>
</div>
</div>
</>
)
} else {
return null;
}
}
export default Notification;
并且正在使用以下 css 属性:
.own-notification-container {
font-size: 14px;
z-index: 999999;
position: fixed;
box-sizing: border-box;
}
.own-top-right {
top: 12px;
right: 12px;
transition: transform .6s ease-in-out;
animation: toast-in-right .7s;
}
.own-bottom-right {
bottom: 12px;
right: 12px;
transition: transform .6s ease-in-out;
animation: toast-in-right .7s;
}
.own-top-left {
top: 12px;
left: 12px;
transition: transform .6s ease-in;
animation: toast-in-left .7s;
}
.own-bottom-left {
bottom: 12px;
left: 12px;
transition: transform .6s ease-in;
animation: toast-in-left .7s;
}
.own-notification {
transition: .3s ease;
position: relative;
pointer-events: auto;
overflow: hidden;
padding: 30px;
margin: 0 0 15px;
width: 200px;
height: 200px;
border-radius: 3px 3px 3px 3px;
box-shadow: 0 0 10px #999;
color: #000;
opacity: .9;
background: #fff no-repeat 15px;
}
.own-notification:hover {
box-shadow: 0 0 12px #fff;
opacity: 1;
cursor: pointer
}
.own-notification-title {
font-weight: 700;
font-size: 16px;
text-align: left;
margin-top: 0;
margin-bottom: 6px;
width: 300px;
height: 18px;
}
.own-notification-message {
text-align: left;
height: 18px;
margin: 0 0 0 -1px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.own-notification-image {
float: left;
margin-right: 15px;
}
.own-notification-image img {
width: 30px;
height: 30px;
}
.own-toast {
height: 50px;
width: 365px;
color: #fff;
padding: 20px 15px 10px 10px;
}
@keyframes toast-in-right {
from {
transform: translateX(100%);
}
to {
transform: translateX(0);
}
}
@keyframes toast-in-left {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
通知消息被切断,我不知道为什么。App.js 正在使用props.children和我的 Notification 组件呈现主html 标记。为什么没有显示通知标题的任何提示?注意:您在屏幕截图中看到的搜索栏不负责该故障。我已经关闭了该组件。
解决方案
我已经解决了这个问题,因为我在根级别使用了两个不同的样式表,这导致了这个问题。
推荐阅读
- javascript - 如何将一些 wasm 文件用于不依赖于 wasm-pack 的其他 javascript 项目?
- camera-calibration - 从鱼眼图像中采样透视(子)视图
- javascript - 执行多个 MySQL 查询相互依赖节点 js
- flutter - 将数据从一个屏幕传回另一个屏幕
- python - 我的深度学习模型不是训练。我如何让它训练?
- java - 如何获取 IntelliJ 2020.02 用于运行 Java 配置的实际命令
- javascript - 如何在使用 Firebase 函数时更正“请求的资源上不存在‘Access-Control-Allow-Origin’标头”错误?
- parsing - 与haskell中的字符串模式匹配
- c++ - 仅当用户更改值时如何调用 QSpinBox 的 changeValue
- c++ - 包含特定标头时“模板参数 1 无效”