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

Question

我是我的 React 应用程序，我正在使用 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();

Answer 1

解决此问题的两种方法：

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

像这样

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

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

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

alert

reactjs