1

我正在尝试在我的项目中使用 toastify，但似乎 react 没有选择类库。当我执行操作时，我可以看到显示消息，但它仅以文本和普通 div 的形式出现。

我已经通过 webpack 进行了修改，所以我可以使用 css 模块，这可能是问题吗？请参阅下面的代码：

应用容器：

import { ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

class App extends Component {
    render() {
        return (
            <div className={classes.ListHolder}>
                <Layout>
                    <ToastContainer className={classesToast} />
                    <Switch>
                        <Route path="/update" component={ItemBuilder} />
                        <Route path="/add-new" component={ItemBuilder} />
                        <Route path="/" component={Itemsholder} />
                    </Switch>
                    {/* <div>
                        <h1>Plan Your trip</h1>
                    </div> */}
                </Layout>
            </div>
        );
    }
}

我使用它的组件：

import { toast } from 'react-toastify';


            axios
                .post('/items.json', item)
                .then((res) => {
                    this.setState({ loading: true, added: true });
                    toast('testing!!!! ');
                })
                .catch((error) => {
                    this.setState({ loading: true, added: true });
                    console.log(error);
                });[![enter image description here][1]][1]

我添加了一张图片来演示 UI。

开发和生产的 css webpack 配置：

            test: /\.css$/,
                        use: [
                            require.resolve('style-loader'),
                            {
                                loader: require.resolve('css-loader'),
                                options: {
                                    importLoaders: 1,
                                    modules: true,
                                    localIndentName: '[name]__[local]__[hash:base64:5]',
                                },
                            },

有任何想法吗？

4

0 回答 0