Toastify classes not working in my react app component

550 Views Asked by At

I'm trying to use toastify in my project but it seems that react is not picking up the classes library. I can see the display message when I do my action but it appears in just text and as a normal div.

I have modified by webpack so I can use css modules, might this be the problem? See my code below:

App container:

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>
        );
    }
}

Component where Im using it:

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]

I added a pictures to demostrate the UI.

css webpack config for dev and prod:

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

Any ideas?

0

There are 0 best solutions below