title: My component is not reading imported Slick CSS
body: <p>I'm importing Sick carousel's CSS to my root component like this:</p>
  <pre class="lang-js prettyprint-override"><code>    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 (
              &lt;AppContext.Provider value={{ foo: 'bar' }}&gt;
                &lt;ThemeProvider theme={theme}&gt;
                  &lt;AppContainer&gt;
                    &lt;GlobalStyle /&gt;
                    &lt;Layout&gt;
                      &lt;Component {...pageProps} /&gt;
                    &lt;/Layout&gt;
                  &lt;/AppContainer&gt;
                &lt;/ThemeProvider&gt;
              &lt;/AppContext.Provider&gt;
            )
          }
          
          App.propTypes = {
            Component: PropTypes.elementType.isRequired,
            pageProps: PropTypes.object.isRequired,
          }
          
          export default App
  </code></pre>
  <p>The problem is that the styles are not being applied to my carousel.</p>
  <p>I have tried to import the CSS in the component which needs it, but next.js is giving me the error that either I have to import it in the root component or make it component level CSS, which I don't know how to do.</p>
  <p>Any suggestions please?</p>