css - 通过应用 SCSS 类来设置 toast 容器的样式

Question

我正在尝试设计react-toastify吐司容器的样式：

<ToastContainer style={{width: "30%"}} className="toast"
    position="top-center"
    etc.
/>

这是SCSS：

.toast {
    width: 30%; // affects the text, not the container
    font-size: 2rem;
    text-align: center;
    & img {
        width: 3rem; // no effect
    }
}

width: 30%在 style 属性中按预期工作，即设置容器的宽度。为什么类中的相同属性会影响文本，即使文本变窄？

的样式img是试图使图标变大。我怀疑这个尝试失败了，因为图标是一个字符，而不是一个图像。但是，我找不到如何设置它的字体大小。有任何想法吗？

编辑：这是我在元素资源管理器中看到的：

标签： cssreactjssassreact-toastify