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?