Is there API to add a unique prefix to all `react-toastify` class names?

Question

I'm working on a library that uses react-toastify v7 under the hood. The consumer application uses react-toastify v8. Both versions operate with the same class names but have different styles. That causes UI issues.

// 8.0.1
.Toastify__toast-body {
  margin: auto 0;
  -ms-flex: 1 1 auto;
      flex: 1 1 auto;
  padding: 6px;
  display: -ms-flexbox;
  display: flex; // <-- NEW STYLE FROM v8
  -ms-flex-align: center;
      align-items: center; // <-- NEW STYLE FROM v8
}
// 7.0.4
.Toastify__toast-body {
  margin: auto 0;
  -ms-flex: 1 1 auto;
      flex: 1 1 auto;
  padding: 6px;
}

Unfortunately, I didn't find any API that allows me to add a unique prefix to all react-toastify classes to isolate the styles and I ended up writing my custom styles for bodyClassName that override v8 conflict CSS properties.

{
    padding: '0',
    display: 'block',
}

Migration to the same version of react-toastify is not an option - there might be many consumer applications and I don't know which version of the library they will use.

Is there API to add a unique prefix to all `react-toastify` class names?

0 Answers0