reactjs - react ；如何根据警报文本获取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

有两种方法可以解决这个问题:

1. 使用您自己的模板而不是react-alert-template-basic。这是一个简单的模板文件，您可以将其保存在代码库中。您可以从 react-alert-template-basic 复制除 width(设置为 300px)之外的所有内容，并且您可以走吧。

2. 继续使用react-alert-template-basic但覆盖CSS。您必须使用 !important 进行覆盖，因为它们使用内联样式。

像这样

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