Как установить стиль детей, использующих модули css, в проектеactjs, использующем classNames и JSX

css twitter-bootstrap reactjs react-jsx auth0

121 просмотра

1 ответ

15 Репутация автора

Я настраиваю проект с React JS и хочу использовать auth0 для обработки аутентификации (и, возможно, некоторых серверных функций).

auth0 предоставляет хороший «начальный» проект https://github.com/auth0-samples/auth0-react-sample, который работает в основном из коробки.

Код для основного контейнера использует JSX и загружает стиль CSS из файла модуля. Файл модуля содержит классы className, которые используются для стилизации.

Я расширяю макет начальной загрузки с помощью компонентов React-Bootstrap и могу стилизовать некоторые компоненты с помощью синтаксиса classNames.

Например, я стилизую цвет фона Navbar следующим образом:

Присоединение к файлу модуля css /01-Login/src/views/Main/styles.module.css

.mainNavBar{
        background-color: rgb(45, 140, 210);                                                    
        border-color: rgb(45, 140, 210);                                                        
} 

Затем в файл, содержащий JSX 01-Login/src/views/Main/Container.js

<Navbar className={styles.mainNavBar} fixedTop>
...
</Navbar>

Тем не менее, когда я пытаюсь стилизовать другие внутренние элементы, то есть цвет текста,

Я пытался:

.mainMenuItem { 
        color: #fff;
}

А также:

 <NavItem className={styles.mainMenuItem} eventKey={1} href="#">Link</NavItem>

Не работает Я думаю, что это потому, что я не знаю, как добраться до детей NavItem.

Я попробовал это и варианты этого:

.mainMenuItem ul > li > a { 
        color: #fff;
} 

Но, похоже, это не самый правильный способ сделать это, и он не работает (хотя элемент 'li' был стилизован под цвет в некоторый момент при проверке в браузере, но не 'a'). .).

Наконец, я попробовал встроенные стили (см. Связанный вопрос « Добавление встроенного стиля вactjs без использования JSX» ), но, похоже, это та же проблема наследования.

Большое спасибо, если вы можете указать мне правильное направление, поскольку я в замешательстве.

Изменить 19/07/2016

Похоже, что NavItem не получает элементы стиля ...

Я отправил вопрос в реакцию-начальную загрузку: https://github.com/react-bootstrap/react-bootstrap/issues/2070.

Автор: David Weiss Источник Размещён: 18.07.2016 08:28

Ответы (1)


0 плюса

15 Репутация автора

Решение

Я использовал встроенные стили с синтаксисом JavaScript с Radium вместо передачи стандартного CSS с атрибутом «Classname».

Автор: David Weiss Размещён: 10.08.2016 05:48
Вопросы из категории :
32x32