I have included Sick carousel's CSS in the root component by importing it like this:
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
However, I am facing an issue where the styles are not taking effect on my carousel.
I attempted to import the CSS directly into the component using the carousel, but encountered an error in next.js stating that it must be imported in the root component or utilized as component-level CSS, which I am unsure how to achieve.
If you have any suggestions or advice, please share them with me. Thank you!