Таргетинг на вложенный div, поступающий от внешнего компонента
Я использую импортированный компонент, который не могу изменить.
Этот компонент имеет много вложенных div.
Где-то глубоко в этих div мне нужно добавить к нему нижнее поле.
С помощью Chrome DevTools я могу добавить маржу в один из div и добиться
margin хочу. Но не могу заставить его работать, когда я пытаюсь добавить свой css в свой файл scss.
Как я могу это сделать?
const MyComponent = props => {
return (
<div>
{/* This component is not in my control. I can't modify this component*/}
<ImportedComponent/>
</div>
);
};
Когда я вижу это в Chrome DevTools, CSS выглядит примерно так.
Если бы мне пришлось добавить стиль полей рядом с aCssClass или внутри блока aCssClass через Chrome,
Я получаю необходимую мне маржу. Но, как уже говорилось, можно достичь в Chrome DevTools, но не через мой файл scss.
<div class = "my-own-class">
<!-- This is all coming from ImportedComponent, each div has some css class -->
<div>
<div>
<div class = "aCssClass anotherClass"> <!-- i want to be able to add my margin here, able to do it but only via Chrome dev tools-->
<div>
<div>
Some data
</div>
</div>
</div>
</div>
</div>
</div>
Это стили, которые я пробовал, без разницы.
.my-own-class {
margin-bottom : 1em;
}
.my-own-class > div:nth-child(3) {
margin-bottom : 22px;
}
.my-own-class body .aCssClass {
margin-bottom: 22px;
}
body .aCssClass {
margin-bottom: 22px;
}
body > .aCssClass {
margin-bottom: 22px;
}
.my-own-class .aCssClass {
margin-bottom: 22px;
}
.my-own-class > .aCssClass {
margin-bottom: 22px;
}
Скриншот
В выделенной части я добавил нижнее поле 10px под body .sc_marginRight_0 на правой панели, которая работает.
@Zerowiel Это постоянно.
.my-собственный-класс .aCssClass {край-низ: 22px; } Если сработает, не могли бы вы предоставить нам код или что-то еще?
Что произойдет, если вы создадите стиль для своего класса? Применяется ли css?
Добавьте цветовой стиль, чтобы увидеть, применяется ли что-нибудь. Используйте инструменты разработчика, чтобы увидеть, что применяется, а что перезаписывается. Существуют ли для компонента стили по умолчанию? .my-own-class .aCssClassработает с кодом, который вы предоставили
@Zerowiel Извините, что борюсь с кодовым пером. Добавлен скриншот реальной конструкции. Не уверен, поможет ли это проиллюстрировать проблему.
@JonP Добавил фон для раскраски ко всем вышеупомянутым CSS, и ни один из них не имеет никакого эффекта. Нет стилей по умолчанию, не относящихся к полям. Добавил скриншот самой вещи. Не уверен, что это помогает тем временем, пытаясь написать ручку, но не могу с большим количеством вещей, происходящих в нем.
Проблема здесь может быть в том, что ваш css не импортируется ^^ '
@Zerowiel CSS импортирован нормально. В том же рабочем файле есть и другие стили.
Основы верны. Помимо того, что вы нам представили, происходит что-то еще. Еще раз проверьте соответствие myClass в HTML и CSS. Установите что-нибудь еще с myClass и убедитесь, что это работает. Что вы видите, когда проверяете элемент после применения вашего класса? Вы видите какое-нибудь упоминание об этом? В идеале нам нужно увидеть код, который воспроизводит проблему.
@JonP Обратите внимание, что весь CSS, который я написал, появляется в источниках в Chrome, но это все. Они не используются ни в одном div. В отличие от другого CSS, такого как пример класса sc_padding_10 на скриншоте выше, который используется в div.
Это говорит мне, что класс был применен неправильно, проверьте написание имени класса и т. д. Используйте .my-own-class { color:red; }. Осмотрите родительский элемент .my-own-class с помощью инструментов разработчика. Применялся ли класс на этом уровне? Есть ли шанс, что это будет инкапсулировано в iFrame по пути?
Ответы 1
Я думаю, что это просто проблема специфики, попробуйте добавить! important, и все будет нормально.
.my-own-class .aCssClass {
margin-bottom: 22px !important;
}
Добавлено! Important ко всем приведенным выше css, которые я пробовал, к сожалению, не дает никаких различий.
НЕТ! вместо этого решите проблему специфичности. См .: smashingmagazine.com/2010/11/…
Думаю, если он сделает .my-own-class уникальным, это не вызовет проблем?
Полагаю, название класса постоянно меняется? Или это постоянно?