While working on my project based on next.js, I encountered a situation where loading CSS in other pages was successful:
import css from './cssname.css';
<div className={css.myclass}></div>
However, now that I am implementing a lightbox component from this link, I needed to import the necessary CSS file like this:
import "react-popupbox/dist/react-popupbox.css"
The problem arises when the CSS does not apply correctly in my code. Below is the complete code which I copied from the documentation's first example:
import React ,{Component} from 'react';
import { PopupboxManager, PopupboxContainer } from 'react-popupbox';
import "react-popupbox/dist/react-popupbox.css"
class lightbox extends Component{
constructor(props){
super(props)
this.openPopupbox = this.openPopupbox.bind(this);
}
openPopupbox(){
const content = (
<div>
<p>Work like you don't need the money.</p>
<p>Dance like no one is watching.</p>
<p>And love like you've never been hurt.</p>
<span>― Mark Twain</span>
</div>
)
PopupboxManager.open({ content })
}
render(){
return(
<div>
<button onClick={this.openPopupbox}>Click me!</button>
<PopupboxContainer/>
</div>
)
}
}
export default lightbox