React - 如何将 node_modules styles 导入组件以在本地设置样式

Question

Please help me on this issue. First, I am using both materialize-css and materiaul-ui at the same time. First, I created a Navbar that imports materialize-css node_module style files.

import { useContext } from 'react';
import { useRouter } from 'next/router';
import Link from 'next/link';
import _ from 'lodash';

import ActiveLink from '../ActiveLink';
import PagesContext from '../context/PagesContext';

import './Navbar.scss';

const Navbar = () => {
    const pagesContext = useContext(PagesContext);
    const router = useRouter();
    const currentRouteObject = _.find(pagesContext, function(page) {
        return page.path === router.pathname;
    });

And,

Navbar.scss

@import '~materialize-css/dist/css/materialize.min.css';

And, I have one other component. But, this materialize-css styles are imported in that other component too. And, it breaks my styling for other component. Is there any way of encapsulating this imported styles as like in Angular?

Thanks in advance for your helps. Best Regards.

Answer 1

You could do

Navbar.scss

.materialize-container {
  @import '~materialize-css/dist/css/materialize.min.css';
}