reactjs不导入css

Posted 2023-02-22

【中文标题】reactjs不导入css

【英文标题】：reactjs not importing cs-s-

【发布时间】：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 无法正常工作并且按照您的建议进行操作。

【参考方案1】：

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