Il mio componente non legge Slick CSS importato
Sto importando il CSS di Sick carousel nel mio componente root in questo modo:
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
Il problema è che gli stili non vengono applicati al mio carosello.
Ho provato a importare il CSS nel componente che ne ha bisogno, ma next.js mi dà l'errore che devo importarlo nel componente root o renderlo CSS a livello di componente, cosa che non so come fare .
Qualche suggerimento per favore?
Risposte
Ho anche affrontato questo problema durante l'utilizzo di react-slick, richiede pochi CSS da slick-carousel per il cursore, le frecce di navigazione ...
Al momento ho due soluzioni:
- Soluzione 1 : sposta l'importazione CSS in root (
pages/_app.js)
// _app.css
...
import 'slick-carousel/slick/slick.css'
import 'slick-carousel/slick/slick-theme.css'
...
// page/_app.js
...
import "./_app.css"
...
Commento: fa funzionare React slick ma il CSS del slick-carousel viene caricato su tutte le pagine. Non così buono!
- Soluzione 2 (preferita) : utilizza il
linktag e incorpora questi CSS nella tua pagina<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>
Commento: incorporiamo e carichiamo solo gli stili nelle pagine di cui abbiamo bisogno, forse aiuta a salvare i byte.