0

I am trying to style the react-toastify toast container:

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

Here is the SCSS:

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

width: 30% in the style attribute works as expected, i.e. sets the width of the container. Why does the same property in the class affect the text, i.e. makes the text narrow?

The styling of img is an attempt to make the icon larger. I suspect that this attempt fails because the icon is a character, not an image. However, I could not find how to set it's font size. Any ideas?

Edit: Here is what I see in the element explorer:

enter image description here

AlwaysLearning
  • 7,257
  • 4
  • 33
  • 68
  • Please let me know if I should ask this as two separate questions. – AlwaysLearning Oct 31 '21 at 11:13
  • I'm not familiar with `react-toastify` but everything depends on what ` – Azu Oct 31 '21 at 16:57
  • @Azu I have pasted the elements into the question. `Toastify__toast_container` has `toast` applied to it... – AlwaysLearning Oct 31 '21 at 17:30
  • 2
    As I can see, the inline style `style={{width: "30%"}}` is applied to the `.toast` container. If you remove it, it's very possible that some of the classes before `toast` to set the `width`. You say it's applied to the text... unfortunately it's not visible from the screenshot where the text is. Is the `svg` icon you;d like to enlarge? Then use `& svg`. – Azu Oct 31 '21 at 17:49
  • Setting `width` and `height` for `svg` does not change the icon's size. It seems like the size is controlled by `viewBox`. But how so I change it? – AlwaysLearning Oct 31 '21 at 19:14
  • Based on https://stackoverflow.com/questions/24463096/change-svg-viewbox-size-with-css, transform did the job. Thanks! – AlwaysLearning Oct 31 '21 at 19:19

0 Answers0