reactjs不导入css

如何解决reactjs不导入css

我正在使用基于nextsjs的项目，在其他页面中，如果我这样加载CSS则可以正常工作

import css from './cssname.css';

<div className={css.myclass}></div>

但是现在我正在处理lightbox component，我需要为此导入css，所以我要这样做

import "react-popupBox/dist/react-popupBox.css"

css在我的代码中不起作用。这是我的完整代码，我从docs第一个示例中复制粘贴。

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

解决方法

nextJS不允许您在页面/_app.js上导入期望的CSS文件。创建pages / _app.js文件（如果尚不存在）。然后，导入CSS文件。有关更多信息，请检查文档：Built-In CSS Support