css в reactjs приложение не применяется - logi c на основе позиционной логики - PullRequest
Новая
       0

css в reactjs приложение не применяется - logi c на основе позиционной логики

0 голосов
/ 08 июля 2020

Я пытаюсь устранить причину, по которой определенный класс c css не применяется к кнопке в моем приложении reactjs. Кажется, я не могу найти ошибку - я уверен, что мне не хватает чего-то простого.

Вот определение css: 

.button-group-right {
    justify-content: flex-end;

    .toolbox-button {
        &:nth-child(2) {
            .toolbox-icon {
                background-color: $hangupColor;
                border: 1px solid $hangupColor;
                width: 40px;
                height: 40px;
        
                &:hover {
                    background-color: $hangupColor;
                }

                svg {
                    fill: #fff;
                }
            }
        }
    }

}

как вы можете видеть, если кнопка имеет индексное значение 2, она должна применять этот стиль. (в основном применяем красный фон)

Я добавил консольный оператор отладки, чтобы распечатать содержимое массива, чтобы доказать, что кнопка зависания имеет индекс 2: 

(3) ["overflowmenu", "tileview", "hangup"]
0: "overflowmenu"
1: "tileview"
2: "hangup"
length: 3
__proto__: Array(0)

Отрисованный код HTML выглядит так: 

<div class="button-group-right">

    (div for first 2 buttons removed for simplifying code review)

    <div aria-label="Leave the call" class="toolbox-button">
        <div>
            <div class="toolbox-icon">
                <div class="jj-icon">
                    <svg height="24" width="24" viewBox="0 0 32 32">
                        <path></path>
                    </svg>
                </div>
            </div>
        </div>
    </div>
</div>

Если вы видите, где я заблудился, я весь уши.

Спасибо.

1 Ответ

0 голосов
/ 09 июля 2020

Я думаю, вы неправильно поняли, что означает nth-child. Речь идет не об индексе вложенности, а о размещении в родительском элементе.

например, в следующем коде: 

<html>
<head>
<style> 
p:nth-child(2) {
  background: red;
}
</style>
</head>
<body>
<div>
<p>The first paragraph.</p>
<p>The second paragraph.</p>
</div>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>

</body>
</html>

второй и третий p получат красный background, потому что они вторые дочерние элементы в своих родителях (second p - второй дочерний элемент в div, а third p - второй дочерний элемент элемента body).

поэтому, если вы хотите передать стили в toolbox-icon div вам нужно сделать: 

 .toolbox-button {
            .toolbox-icon {
                background-color: $hangupColor;
                border: 1px solid $hangupColor;
                width: 40px;
                height: 40px;
        
                &:hover {
                    background-color: $hangupColor;
                }

                svg {
                    fill: #fff;
                }
            }
    }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...