反应如何根据警报文本获取React-Alert调整的宽度

问题描述

我不是我的应用，我正在使用react-alert。我遇到的问题是宽度似乎是固定的，因此有文字换行。我正在尝试根据包含的警报消息的长度来调整宽度，而不是自动换行。我该怎么做？

// 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();

解决方法

两种解决方法：

使用您自己的模板代替react-alert-template-basic。这是一个简单的模板文件，您可以将其保存在代码库中。您可以从react-alert-template-basic复制除width（设置为300px）以外的所有内容，一切顺利。
继续使用react-alert-template-basic，但覆盖CSS。您必须使用!important来覆盖它们，因为它们正在使用内联样式。

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

alert reactjs reactjs