Блог

Главная - Вопросы по программированию - Стили компонента React конфликтуют со стилями другого компонента

Стили компонента React конфликтуют со стилями другого компонента

#css #reactjs #stylesheet #react-component

#css #reactjs #таблица стилей #реагирующий компонент

Вопрос:

У меня есть такой компонент приложения:

 const App = () => {
    return (
        <Router>
            <Route exact path='/' component={Landing} />
            <Route path='/login' component={Login} />
        </Router>
    )
}

У каждого компонента есть свои собственные каталоги и таблицы стилей. моя структура папок выглядит следующим образом:

 src
   |
   |
   Landing|
   |      |
   |      Landing.js
   |      Landing.module.css
   |
   |
   Login|
   |    |
   |    Login.js
   |    Login.module.css
   |
   app.js
   index.js

Моя проблема в том, что таблицы стилей компонентов Login и Landing конфликтуют друг с другом, и целевая страница выглядит не очень хорошо. например, цвет фона входа в систему применяется на целевой странице, а я этого не хочу.
Я импортировал только CSS-файл в каждый компонент следующим образом:

 import styles from './Landing.module.css'

и это пример того, как я использую переменную styles:

 return (
        <div className={styles.navBar}>
            <Link to="/">
                <img className={styles.logo} src="https://image.flaticon.com/icons/png/512/2039/2039175.png" />
            </Link>
            {loggedIn amp;amp;
                <div>
                    <button onClick={logout}>log out</button>
                    <Link className={styles.navItem} to="/users">get users</Link>
                </div>
            }
            {!loggedIn amp;amp;
                <div>
                    <Link className={styles.navItem} to="/login">log in</Link>
                    <Link className={styles.navItem, styles.btn} to="/signup">signup</Link>
                </div>
            }
        </div>
    )

пожалуйста, помогите мне.

Комментарии:

1. Как импортировать файлы css модуля для каждого компонента?

2. Если вы используете его так, как className={styles.yourCssSelector} должно быть нормально. Пожалуйста, приведите пример файла css и того, как вы используете его внутри comp.

3. ДА. мне нравится использовать переменную styles.

4. Можете ли вы предоставить воспроизводимый пример на codesandbox.io или эквивалент?

5. Я не могу. потому что я очень ленив 🙂 и это тоже требует времени

Ответ №1:

Даже если он старый, я собираюсь ответить за то, кто придет после: причина, по которой это происходит, заключается в том, что ваши селекторы CSS, скорее всего, имеют ту же специфику, следовательно, порядок появления определяет, какой стиль будет применен.

Login в вашей структуре папок появляется после Landing , поэтому ваш bundler заставит Login стили появляться последними в вашем связанном CSS, который затем переопределит ваши Landing .

Существует множество решений этой проблемы:

  • вы можете повысить специфичность селектора, который вы хотите выиграть (например, дважды повторив класс в вашем CSS-файле)
  • вы можете уменьшить специфичность селектора, который хотите потерять (например, с :where() помощью)
  • теперь вы можете использовать каскадные слои, если вас устраивает, какие браузеры поддерживаются (например @layer )
  • и т.д…