reactjs不导入css答案

【问题标题】：reactjs not importing cssreactjs不导入css
【发布时间】：2021-01-06 20:42:59
【问题描述】：

我正在使用基于 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

【问题讨论】：

将导入更改为import './cssname.css'; 和<div className="myclass"></div>
@Nithish 我关注 Docs (github.com/fraina/react-popupbox) 但 css 无法正常工作并且按照您的建议进行操作。

标签： css reactjs jsx next.js

【解决方案1】：

nextJS 不允许您在 pages/_app.js 上导入 CSS 文件。如果还没有，请创建 pages/_app.js 文件。然后，导入 CSS 文件。更多信息请查看文档：Built-In CSS Support

【讨论】：