时间戳

首页 > 解决方案 > 我的组件没有读取导入的 Slick CSS

css - 我的组件没有读取导入的 Slick CSS

问题描述

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

    import React from 'react'
    import PropTypes from 'prop-types'
    import { ThemeProvider } from 'styled-components'
    import { AppContext } from 'services/AppContext'
    import Layout from 'components/blocks/Layout'
    import { GlobalStyle, AppContainer } from 'shared/styles'
    
    import theme from 'theme'
    
    import 'slick-carousel/slick/slick.css'
    import 'slick-carousel/slick/slick-theme.css'
    
        function App({ Component, pageProps }) {
          return (
            <AppContext.Provider value={{ foo: 'bar' }}>
              <ThemeProvider theme={theme}>
                <AppContainer>
                  <GlobalStyle />
                  <Layout>
                    <Component {...pageProps} />
                  </Layout>
                </AppContainer>
              </ThemeProvider>
            </AppContext.Provider>
          )
        }
        
        App.propTypes = {
          Component: PropTypes.elementType.isRequired,
          pageProps: PropTypes.object.isRequired,
        }
        
        export default App

问题是样式没有应用于我的轮播。

我试图在需要它的组件中导入 CSS，但是 next.js 给了我错误，我必须将它导入根组件或使其成为组件级 CSS，我不知道该怎么做.

请问有什么建议吗？

标签： cssreactjsnext.jsslick.jsreact-slick

解决方案

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

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

  • 解决方案 1：将 CSS 导入移动到根目录 ( pages/_app.js)
// _app.css
...
import 'slick-carousel/slick/slick.css'
import 'slick-carousel/slick/slick-theme.css'
...

// page/_app.js

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

评论：它使 react-slick 工作，但 slick-carousel 的 CSS 加载到所有页面上。不太好！

  • 解决方案 2（首选）：使用link标签并将这些 CSS 嵌入到页面的<head>
// 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>

评论：我们只在我们需要的页面中嵌入和加载样式，也许它有助于节省字节。

推荐阅读