React; How to get the width of React-Alert adjust based on the alert text

user_10617728 0
Viewed 1294

I'n my react app, i'm using react-alert. The problem i'm having is the width seems to be fixed thus having the text wrap. I'm trying to have the width adjust it's length based on the length of the containing alert message and not wrap the text. How do i go about doing that?

// React Alert
import { Provider as AlertProvider } from "react-alert";
import AlertTemplate from "react-alert-template-basic";

// Alerts Options
const alertOptions = {
  timeout: 5000,
  position: 'top center',
}


ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <AlertProvider template={AlertTemplate} {...alertOptions}>
        <App />
      </AlertProvider>
    </Provider>
  </React.StrictMode>,
  document.getElementById("root")
);

serviceWorker.unregister();
reactjs alert
1 Answers

Two ways you can get around this:

  1. Use your own template instead of react-alert-template-basic. It's a simple template file that you can keep in your codebase. You can copy all the things from react-alert-template-basic except width (which is set to 300px) and you're good to go.

  2. Keep using react-alert-template-basic but override CSS. You'll have to use !important to override as they are using inline styles.

Like this

#__react-alert__ div div div {
  width: auto !important;
}
user_43153800
Related