將 node_module css 文件導入 NextJs

Question

我正在嘗試將https://www.npmjs.com/package/react-mapbox-autocomplete與我的 nextJS 應用程序一起使用。 當我嘗試實際使用它時，我遇到了一個問題。 我得到以下

error:"./node_modules/react-mapbox-autocomplete/index.css Global CSS cannot be imported from within node_modules. Read more: https://err.sh/next.js/css-npm Location: node_modules/react-mapbox -自動完成/index.js

現在嘗試對此進行一些研究，我看到NextJS支持從_app.js中的node_modules導入css，我試過了。 但我仍然收到錯誤：。（這是我的_app：js：

import Layout from '../components/layout'
import 'react-mapbox-autocomplete/index.css';

function MyApp({ Component, pageProps }) {
  return (
  <Layout><Component {...pageProps} /></Layout>)
}

export default MyApp

希望你們中的一個可以提供幫助！

Answer 1

我建議進一步查看該庫的文檔。 在他們的 README.md 中，他們告訴您如何同時使用樣式和組件本身。

import MapboxAutocomplete from 'react-mapbox-autocomplete';

您還需要在這樣的地方實際使用他們的組件。

function MyApp({ Component, pageProps }) {
  return (
    <Layout>
      <Component {...pageProps} />
      <MapboxAutocomplete />
    </Layout>
  )
}

從那里您可以通過修改他們在此處記下的類來覆蓋他們的 styles： https://github.com/localvore-today/react-mapbox-autocomplete#styling