我的组件没有读取导入的光滑CSS_Css_Reactjs_Next.js_Slick.js_React Slick

我的组件没有读取导入的光滑CSS

css reactjs next.js

我的组件没有读取导入的光滑CSS,css,reactjs,next.js,slick.js,react-slick,Css,Reactjs,Next.js,Slick.js,React Slick,我正在将Sick carousel的CSS导入我的根组件，如下所示：从“React”导入React 从“道具类型”导入道具类型从“样式化组件”导入{ThemeProvider} 从“服务/AppContext”导入{AppContext} 从“组件/块/布局”导入布局从“共享/样式”导入{GlobalStyle，AppContainer} 从“主题”导入主题导入'slick carousel/slick/slick.css' 导入'slick carousel/slick/slick t

我正在将Sick carousel的CSS导入我的根组件，如下所示：

从“React”导入React
从“道具类型”导入道具类型
从“样式化组件”导入{ThemeProvider}
从“服务/AppContext”导入{AppContext}
从“组件/块/布局”导入布局
从“共享/样式”导入{GlobalStyle，AppContainer}
从“主题”导入主题
导入'slick carousel/slick/slick.css'
导入'slick carousel/slick/slick theme.css'
函数应用程序（{Component，pageProps}）{
返回(
)
}
App.propTypes={
组件：PropTypes.elementType.isRequired，
pageProps:PropTypes.object.isRequired，
}
导出默认应用程序

问题是这些样式没有应用到我的旋转木马

我尝试在需要它的组件中导入CSS，但是next.js给了我一个错误，要么我必须在根组件中导入CSS，要么使其成为组件级CSS，我不知道如何做

有什么建议吗？

我在使用react slick时也遇到了这个问题，它需要slick carousel中的一些CSS来制作滑块、导航箭头

目前，我有两种解决方案：

解决方案1：将CSS导入移动到根目录（
```
pages/\u app.js
```
）

注释：这使react很流畅，但所有页面上都加载了流畅的旋转木马的CSS。不太好

解决方案2（首选）：使用
```
链接
```
标记并将这些CSS嵌入页面的

//我下载了CSS，缩小了它们并将其放入了公共文件夹中
/public/static/css/slick.css
/public/static/css/slick-theme.css
//page/example.js
从“下一个/头”导入头
...
//嵌入本地CSS
//或者我们也可以将href更改为CDN

注释：我们只在需要的页面中嵌入和加载样式，这可能有助于节省字节。

您的根组件是什么？你能分享一些代码吗？是的，我会立即更新。它应该可以正常工作，而不需要像这里所说的定制任何东西。你有一个示例演示吗？

// _app.css
...
import 'slick-carousel/slick/slick.css'
import 'slick-carousel/slick/slick-theme.css'
...

// page/_app.js

...
import "./_app.css"
...

// I downloaded the CSS, minified them and put in the public folder
/public/static/css/slick.css
/public/static/css/slick-theme.css

// page/example.js

import Head from "next/head"

...
<Head>
// Embed local CSS
<link rel="stylesheet" type="text/css" href="/static/css/slick.css" />
<link rel="stylesheet" type="text/css" href="/static/css/slick-theme.css" />

// Or we can change the href to CDNs too
</Head>