Question

请帮助我解决这个问题。首先，我同时使用了materialize-css和materiaul-ui。首先，我创建了一个导航栏，该导航栏导入了materialize-css node_module样式文件。

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;
    });

然后

Navbar.scss

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

而且，我还有一个其他组成部分。但是，此materialize-css样式也已导入到其他组件中。而且，它破坏了我对其他组件的样式。有没有办法像Angular一样封装这种导入的样式？

预先感谢您的帮助。最好的问候。

Answer 1

你可以做

Navbar.scss

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

React-如何将node_modules样式导入组件以在本地对其进行样式设置

1 个答案: