Попытка переопределить css react-начальной загрузки в проекте NextJS

ProgramBox

Попытка переопределить css react-начальной загрузки в проекте NextJS

Post author:admin
Запись опубликована:8 января, 2022
Post category:Вопросы по программированию

#css #reactjs #next.js #react-bootstrap #bootstrap-5

Вопрос:

Я работаю над Next.js проект и попытка использовать Bootstrap в качестве CSS-фреймворка. Я установил react-bootstrap в проект, а затем начал создавать панель навигации. Я пытаюсь добавить класс». active » в одну из ссылок на панели навигации, чтобы показать, что он в настоящее время активен, но у меня возникли проблемы с переопределением свойств начальной загрузки в моем собственном CSS.

Я импортирую css начальной загрузки в _app.tsx файл следующим образом:

 import type { AppProps } from 'next/app'

import 'bootstrap/dist/css/bootstrap.min.css';

import Header from './layouts/Header';

function MyApp({ Component, pageProps }: AppProps) {

  return (
    <>
      <Header />
      <Component {...pageProps} />
    </>
  );

}
export default MyApp

У меня есть навигация внутри компонента, который называется Header.js:

 import Head from 'next/head';
import Image from 'next/image'
import Link from 'next/link';

import { Navbar, Nav, NavDropdown } from 'react-bootstrap';
import styles from '../../styles/Header.module.css';

import headerLogo from '../../public/img/header-logo.png';

const Header = () => {
    return (
        <div>
            <Head>
                <title>Test Project</title>
                <link rel='icon' href='/favicon.ico' />
            </Head>
            <Navbar collapseOnSelect expand="lg" bg="light" style={{ maxWidth: '1440px' }} >
                <Navbar.Brand href='/'>
                    <Image src={headerLogo} alt="logo" />
                </Navbar.Brand>
                <Navbar.Toggle aria-controls="responsive-nabar-nav" />
                <Navbar.Collapse id="responsive-navbar-nav">
                    <Nav className="me-auto">
                        <Link href="/"><Nav.Link>Home</Nav.Link></Link>
                        <Link href="/page1"><Nav.Link className={styles.active}>Active Page</Nav.Link></Link>
                        <Link href="/page2"><Nav.Link>Page 2</Nav.Link></Link>
                        <Link href="/page3"><Nav.Link>Page 3</Nav.Link></Link>
                        <Link href="/about"><Nav.Link>About Us</Nav.Link></Link>
                        <Link href="/contact"><Nav.Link>Contact Us</Nav.Link></Link>
                    </Nav>
                </Navbar.Collapse>
            </Navbar>
        </div >
    )
}

export default Header;

и вот мой простой css:

.active { color: red; }

Я импортирую необходимые мне компоненты начальной react-bootstrap загрузки и создаю свою навигационную панель. Это работает нормально, но, как вы можете видеть, я пытаюсь добавить класс под названием». active» из моего CSS-модуля Header.module.css на «Активную страницу» Nav.Link . Когда я пытаюсь это сделать, применяется CSS, но если я смотрю в DevTools, он переопределяется .nav-link color: rgba(0,0,0,.55) свойством начальной загрузки.

Независимо от того, в каком порядке выполняются инструкции импорта, всегда кажется, что свойства CSS начальной загрузки в конечном итоге переопределяют все, что я написал Header.module.css . Я неправильно импортирую react-bootstrap ? Есть ли что-то, что нужно сделать по-другому, это Next.js проект, а не стандартный проект React?

Любая помощь будет очень признательна,

Спасибо

P.S. Вот как это выглядит в DevTools, если это поможет:

Ответ №1:

попробуйте добавить !важно после so -> цвет: #0d6efd !важно;

1. !важно, конечно, работает, но это действительно плохой способ, когда нужно добавлять «!важно» ко всему, что мешает конкретике и просто усложняет все. Должен быть лучший способ просто переопределить загрузку, как вы сделали бы в другом non-Next.js проект, верно?

2. если ваша область действия на странице в разделе <Стили> не повлияет на другие экземпляры этого загрузочного класса, если вы не используете его несколько раз на странице с областью действия. . . тогда да, добавление другого имени класса было бы более уместным

3. Извините, я не совсем понимаю, что вы имеете в виду. Я создаю модуль CSS для компонента, как я показал в Header.js но независимо от того, какие правила css я в нем настроил, если какие-либо свойства конфликтуют с загрузкой, загрузка всегда имеет приоритет. Это пример, который я показал с помощью ‘.active’. Я не уверен, что вы подразумеваете под использованием <Стилей>?

4. я думаю о vue.js… для стилей реакции вы можете добавить имя класса в <ссылку> и использовать цвет там, просто добавьте этот класс в таблицу стилей

5. В этом проблема, CSS, добавляемый в таблицу стилей модуля CSS, всегда переопределяется CSS начальной загрузки для одних и тех же свойств. Вы вообще читали этот вопрос?

Ответ №2:

Причина в том, что bootstrap предлагает более подробный выбор. Таким образом, вы также можете создать более подробный селектор, указав имена классов для нескольких верхних элементов. И вы, конечно, можете использовать !import , как было упомянуто выше.

Обновление: На скриншоте вы видите, что существует .navbar-light .navbar-nav .nav-link правило, поэтому вам нужно создать аналогичное и добавить свой собственный селектор. Здесь вам нужно будет переключиться на глобальную область, как описано здесь: https://github.com/css-modules/css-modules#exceptions

Таким образом, правило в Header.module.css может выглядеть так:

 :global(.navbar-light) :global(.navbar-nav) :global(.nav-link).active {
  color: red;
}

1. Боюсь, я не понимаю, что вы имеете в виду под первой частью. Я предоставляю более конкретный выбор. Все «обычные» навигационные ссылки имеют класс «навигационная ссылка», а активная имеет «навигационную ссылку» и «активный», однако свойство «цвет» навигационной ссылки всегда переопределяет свойство «цвет «»активного». Ты понимаешь, что я имею в виду? Может быть, я плохо объяснил это. Проблема в том, что нет способа переопределить начальную загрузку, похоже, что CSS-файлы импортируются после CSS-файла модуля с помощью Next.js или что-то в этом роде. Вот почему я спрашиваю, как правильно использовать bootstrap с Next.js

2. Здесь вы можете найти некоторые объяснения того, что я имел в виду: tutorials.jenkov.com/css/precedence.html

3. Спасибо за ссылку, но в этом-то и проблема. Использование !important -ужасное решение, потому что оно нарушает каскадирование и специфику внутри моего собственного CSS-файла. Специфика также не является проблемой, они оба являются объявлениями классов. Проблема заключается в последовательности декларирования. Для какого-то неизвестного next.js причина в том, что он импортирует файлы css начальной загрузки после файлов модулей, и, похоже, этого не избежать. Если я использую Bootstrap на non-next.js проект, очень просто просто импортировать мой CSS-файл последним, что означает, что мой CSS переопределяет загрузочный CSS. В этом вся проблема…

4. Я обновил свой ответ

5. в этом случае порядок импорта стилей css не имеет значения, потому что селектор начальной загрузки состоит из трех имен классов css, но ваш селектор имеет одно имя класса (таким образом, он менее детализирован).

Метки: Попытка переопределить css react-начальной загрузки в проекте NextJS