SCSS类设置react-toastify的ToastContainer样式仅作用于文本问题咨询

宽度仅作用于文本的原因与解决 #

原因 #

1. react-toastify的ToastContainer组件默认将传入的className挂载到Toast内部内容节点，而非最外层容器节点，所以你写的类样式只会作用到内部文本区域。
2. 组件内置的外层容器样式（类名.Toastify__toast-container）权重和自定义类同级、且加载顺序更靠后，会优先生效，所以自定义类的宽度属性无法作用到外层容器。
3. 行内style属性优先级高于所有类选择器，所以你写在行内的宽度可以正常覆盖内置样式。

解决方案 #

使用组件提供的专属类名props明确指定挂载位置，再调整样式覆盖内置规则：

1. 调整组件调用代码：

<ToastContainer 
  // 指定外层容器的自定义类
  containerClassName="custom-toast-container"
  // 指定单个Toast项的自定义类
  toastClassName="custom-toast-item"
  position="top-center"
  // 其余原有配置
/>

2. 修改SCSS代码：

// 外层容器宽度设置，组合选择器提升权重无需!important
.Toastify__toast-container.custom-toast-container {
  width: 30%;
}

// Toast项自定义样式
.custom-toast-item {
  font-size: 2rem;
  text-align: center;
}

提示图标放大的解决方案 #

原因 #

react-toastify的内置提示图标为字体图标，并非img元素，所以你写的img选择器无法匹配到对应节点，样式不生效。

解决方案 #

匹配组件内置的图标类名.Toastify__toast-icon调整大小即可：

.custom-toast-item {
  // 原有样式
  .Toastify__toast-icon {
    // 方式1：调整字体大小放大
    font-size: 3rem;
    // 方式2：用transform缩放，可选
    // transform: scale(1.5);
  }
}

内容的提问来源于stack exchange，提问作者AlwaysLearning