Change fontSize

[kinglycodes]

I tried to change the font size for the Toaster, without success.

My attempts:

style: { background: '#fbfbfb', color: '#161616', padding: '16px 20px', fontSize: 18, },

style: { background: '#fbfbfb', color: '#161616', padding: '16px 20px', fontSize: '18px', },

background, color and padding works fine

How can I change the font size?

[timolins]

Hi! It looks like your code should work. Can you check if there is other CSS that overwrites the font size?

There are two ways to change the font size. Either directly with the toast style:

<Toaster
  toastOptions={{
    style: { fontSize: 24 }
  }}
/>

Here is a working example: https://codesandbox.io/s/react-hot-toast-change-font-size-vt3r4?file=/src/App.js

---

Alternatively you can add it to the Toaster, with the containerStyle prop. This way the font size is inherited from the parent.

<Toaster
  containerStyle={{
    fontSize: 32
  }}
/>

Let me know if you face any issue, in that case we can re-open the issue.

[kinglycodes]

Unfortunately, it doesn't work under toastOptions or containerStyle. The value is also displayed in the Inspector, but apparently overwritten by the * {...} Selector. I also tried it with adding a class.

[timolins]

There is a universal selector (*) selector in screenshots that overwrite the font-size, which is not coming from react-hot-toast.

I'd recommend to investigate where it is coming from, then get rid it. I don't think you'd want to explicitly set the font-size of every element to 10px. If you want a default font size you can set it at top level (body) and it gets inherited, without unwanted overwrites.

If this is actually intended, you can try the using fontSize: "18px !important".

[kinglycodes]

I removed the universal selector and set the font-size in the html, body selector.

Now it works! Perfect! :)