ReactToastify位置在React中不起作用
ReactToastify是一个用于在React应用中显示通知消息的第三方库。它提供了一种简单而灵活的方式来创建和管理通知，可以在应用的各个组件中使用。
ReactToastify的位置不起作用可能是由于以下几个原因：
- CSS样式问题：ReactToastify的位置是通过CSS样式来控制的。如果样式未正确加载或与其他样式冲突，可能会导致位置不起作用。可以检查样式文件是否正确引入，并确保没有其他样式覆盖了ReactToastify的位置样式。
- 容器元素问题：ReactToastify的通知消息是通过一个容器元素来展示的。如果容器元素的位置或尺寸不正确，可能会导致通知消息显示位置不准确。可以检查容器元素的样式和位置，确保它能够正确地容纳通知消息。
- 使用方式问题：ReactToastify提供了多种使用方式，包括全局配置和组件内部配置。如果在使用ReactToastify时没有正确配置位置参数，可能会导致位置不起作用。可以查阅ReactToastify的文档，了解正确的使用方式和位置配置参数。
总结起来，要解决ReactToastify位置不起作用的问题，需要检查CSS样式、容器元素和使用方式是否正确配置。以下是腾讯云提供的一个类似功能的产品：
腾讯云推荐的通知消息组件是Message组件，它可以用于在React应用中显示通知消息。Message组件提供了多种样式和位置配置选项，可以根据需要进行定制。您可以在腾讯云的官方文档中了解更多关于Message组件的信息和使用方法：腾讯云Message组件介绍。
相关·内容
2回答
尝试在react上添加样式
javascript、css、reactjs、react-toastify
我试图添加自定义风格的反应，首先，我有进口这些。
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
而不是叫反应吐司：
const handleToast = () => {
toast("sent mail")
}
在这里，我在土司容器中添加css：
<div>
<ToastContainer toastStyle=
浏览 25提问于2022-05-07得票数 0
3回答
ReactToastify位置在React中不起作用
reactjs、next.js、react-toastify
toastify/dist/ReactToastify.css`，我无法管理Toast以显示在右下角。我使用的是确切的代码作为文档。但它不起作用 import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
toast.configure();
function myComponent () {
...
const submit = () => {
toast.succes
浏览 62提问于2021-08-02得票数 0
回答已采纳
4回答
我怎样才能改变反应式弹出消息的样式？
reactjs、react-toastify
我想要添加我自己的自定义风格的反应-使用弹出消息弹出，取决于它的成功或错误。到目前为止，我尝试了以下方法：
toastify.js
import { toast, Slide } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import { css } from "glamor";
toast.configure({
position: toast.POSITION.BOTTOM_RIGHT,
autoClose: 3000,
浏览 2提问于2020-03-25得票数 7
回答已采纳
2回答
React JS组件未应用CSS页边距
javascript、css、reactjs、jsx
使用react，我在Card.jsx文件中创建了一个非常简单的卡片组件。该组件如下所示。
class Card extends React.Component{
render() {
return (
<div className={style.mainContainer}>
<div className={style.container}>
<div className={style.title}>Hello world</div>
<div classNa
浏览 4提问于2020-12-07得票数 1
2回答
构建一个可以像函数一样触发的React组件
javascript、reactjs
到目前为止，我在使用React时已经多次遇到这个问题，还没有找到解决方案。
假设我们有一个<Notification>组件，它在页面顶部显示一条消息。我希望能够在组件上调用show()，这将触发2秒的'Message‘显示，然后在这2秒后隐藏组件。所有这些功能都将使用CSS和JS超时封装在组件中。
我知道我可以通过props传入' show '，组件可以决定显示自己，但这意味着每个父组件都需要重新实现prop 'show‘的2秒超时，将其从true转换为false。我希望组件封装此功能以便于重用。
或者，给<Notification>配备
浏览 2提问于2015-09-17得票数 0
3回答
在Reactjs中使用样式组件比使用css模块有什么好处
javascript、css、reactjs、styled-components
我正在研究在React应用程序中设置页面样式的最佳方式。我在react中看到了很多可以样式化的库，比如Styled Components，Glamor，CSS Modules。
在我目前的项目中，我正在使用CSS模块(主要是为了摆脱css冲突和页面特定的CSS)。我用谷歌搜索了很多关于为什么我应该使用样式组件和CSS-in-JS的问题，但我没有得到任何具体的答案。所以我的问题是，使用CSS-in-JS或样式组件是否有实际的性能优势，或者它只是语法上的糖。
浏览 0提问于2018-09-19得票数 26
1回答
汇总插件postcss不注入从node_modules导入的css
reactjs、node-modules、rollupjs、rollup-plugin-postcss
下面是我的汇总配置 // rollup.config.js
const postcss = require('rollup-plugin-postcss');
const autoprefixer = require('autoprefixer');
module.exports = {
rollup(config, _options) {
config.plugins.push(
postcss({
plugins: [
autoprefixer(),
],
ext
浏览 108提问于2021-07-29得票数 0
1回答
在Angular2中视图完全更新时调用函数
angular
我的应用程序将显示消息列表(带卷轴)。当用户添加新消息时，页面需要滚动到消息列表的底部。在将新消息添加到消息列表后立即调用scrollToBottom()正确吗？还是会出现时间问题？视图是否已经更新(包含新消息)，因此scrollHeight将是正确的？或者用其他方式表达我的问题:是否有一种方法可以知道/确保当模型更改时视图已经完全更新了。
视图(messaging.html)：
<div class=”height: 100%; scroll: auto”>
<div class="message" *ngFor="#message of mes
浏览 2提问于2016-05-15得票数 2
回答已采纳
1回答
相信我，我一直在梳理Stackoverflow过去的问题，看看是否有任何解决方案可以解决我的问题，但没有运气。
在这里，我试图将两个文件导入一个react应用程序(css和scss)中，.This文件驻留在node_modules目录中。
如果我用@参数导入它，它将显示错误未知令牌
@import '~react-toastify/dist/ReactToastify.css';
@import '~react-toastify/dist/main.scss';
如果按照下面的代码在没有@参数的情况下导入它，它将显示未找到的错误模块。无法解析
import &#
浏览 0提问于2018-11-03得票数 0
回答已采纳
1回答
在内联样式中选择子元素(材质UI制作风格)
material-ui、inline-styles
我使用材质ui makeStyles进行样式化，并且无法从style.js中选择子元素
style.css
.item:hover > .subListItem {
display: block;
}
当我将它改为内联样式时，它就不起作用了。
style.js
item: {
"&:hover > .subListItem": {
display: "block",
},
},
下面是我如何应用类
<li className={classes.item}>
<Paper elevation={3} c
浏览 3提问于2021-06-06得票数 0
回答已采纳
3回答
如何在React中排除全局样式？
reactjs、webpack、material-ui
我正在使用构建我的React。
但是，有一个组件必须嵌入到另一个站点。这意味着，我提供这个组件的产品构建嵌入到一个不同的网站。
我的React应用程序的css被该网站中定义的全局样式覆盖。
我不想要这种行为。有什么办法，我可以隔离我的反应应用程序的css和其他网站的全球css。
我看到了，但是解决方案对我没有帮助。
浏览 0提问于2019-08-24得票数 6
回答已采纳
2回答
为什么不包括我的mdDialog组件的SCSS文件？
webpack、sass、angular-material、angular-cli、mddialog
我有一个相当基本的组件，它将消息传递给用户：
...
let dialogRef = this.dialog.open(
UserMessagingDialog,
{
data: {
'messages': this.messagesToShow,
'messageColors': this.messageColors,
'messageI
浏览 4提问于2017-07-11得票数 1
回答已采纳
2回答
我从我的数据库接收原始的HTML并在前端呈现它，但是，一个HTML类即使应用了，也什么也不做。
javascript、html、css、vue.js
问题是，我从数据库中得到一些消息，并将它们发送到我的前端，以便呈现它们。消息如下：
<span class="emoji">
<img class='responsive-image' src="https://media.discordapp.net/attachments/733747075455647898/733753424008577024/Akali.png">
</span>
因此，我使用v指令将其呈现如下：
<p v-html="message.message"&g
浏览 4提问于2020-07-25得票数 2
回答已采纳
1回答
Toastify未正确呈现
reactjs
我已经创建了一个登录页面来练习我的技能。问题是，在触发handleSubmit函数后，我无法呈现toast通知。流程是，当“用户”提交他或她的登录信息时，将弹出toast通知，显示登录成功。 例如，在我的代码中 import { toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
//once the user is verified, toast notification is launched.
const handleSubmit = asyn
浏览 14提问于2020-12-09得票数 0
1回答
腾讯云总是掉线？
云服务器
我购买的是腾讯云2核8GWIN系统, 上海二线的腾讯云，我在广东远程登录服务器，总是掉线，链接不上，我已经从新安装了系统，还是有这样的问题。是啥原因？
浏览 703提问于2021-05-11
2回答
如何以相对方式在React表(父页面)中定位弹出框(子页面)- CSS/ReactJS/Javascript
javascript、css、reactjs
我正在做一个React Table。我有一个列，其中的数据单元格有一个扩展器图标。如果我们单击扩展器，将打开/显示弹出页面/工具提示。
现在我有两个问题- 1.如何显示弹出页面/工具提示相对于单击扩展器的数据单元格的wrt。例如，age有1000行。有分页和页面大小。因此，假设单击第4行时弹出框/工具提示的位置与单击第7行时弹出框/工具提示的位置不同。您看到的黄色小东西是我的弹出页面/工具提示
在我的代码中，无论我单击特定列的哪个行单元格，弹出窗口都固定在相同的位置。
我想知道如何显示弹出页面相对于数据单元格中的扩展器被单击的wrt。基本上改变顶部和左边就可以了。但是我怎么才能实现。
浏览 1提问于2019-01-03得票数 3
2回答
ReactJS -无法跨组件全局导入scss
reactjs、sass
对于我的应用程序之一，我使用创建-反应-应用程序(没有弹出式)，并具有以下文件夹结构：
/src
assets
scss
abstract
_variables.scss
_mixins.scss
_global.scss
components
Welcome
Welcome.js
Welcome.scss
App.js
App.scss
这些文件的内容如下：
_varia
浏览 2提问于2020-08-31得票数 1
1回答
当将组件scss文件导入样式scss文件时，角组件的样式视图封装无法工作。
angular、sass、angular-material、angular6、angular-material-theming
假设在角分量的my.component.scss文件中有一个SCSS混音。
现在，我在角应用的全局style.scss中导入该文件，因为我想将一些数据传递给这个混合器。
例如：my-component.scss.
<pre>
@mixin my-component-theming($theme) {
// Extract whichever individual palettes you need from the theme.
$warn-palette: map-get($theme, warn);
$warn: mat-color($prim
浏览 1提问于2018-06-07得票数 1
2回答
I样式的子组件如何反应？
javascript、html、css、reactjs、styled-components
在简单的HTML结构中，我可以实现如下所示。我想知道如何对React和样式组件做同样的事情。
HTML
<div className="slider">
<section>Content A</section>
<section>Content B</section>
</div>
我可以像这样针对这部分的造型。
.slider section {
//some styling
};
我如何在与样式组件的反应中实现同样的目标？在本例中，我的滑块div是一个样式化的组件，该部分是一个反应
浏览 0提问于2021-11-25得票数 1
回答已采纳
1回答
ReactJS:正确处理登录数据的用户？
reactjs
因此，目前，我们发送一个API调用来获取用户身份验证数据。用户ID，客户ID等等.
然后，我们通过connect()和mapStateToProps将这些数据传递给redux并将用户数据加载到React路由器中。
然后，每个路由获取这个用户数据并通过道具将其传递给呈现的组件.
然后，在我们的许多组件中，我们使用用户数据进行更多的API调用。
然而，大多数情况下，这些数据显示为空对象{}。
最好是通过React路由器将数据向下传递给组件，还是应该在每个需要用户数据的组件上从redux和mapStateToProps获取数据？
浏览 0提问于2018-03-29得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
