🚀 Svelte Быстрый совет: Содержание стенового слота с: глобальным

Вот пряный 🌶 svelte быстрый совет для тебя, надеюсь, вам наслаждаться 🤩

Когда-нибудь сидел вокруг царапин головой, спрашивая “как на земле я избавляю от этого чертового маржи на моем <Слот> Содержание?” Или какой-то другой слот в стиле укладки?

Ну, я знаю, что у меня есть, Так что, может быть, у вас тоже есть? 🧐

Допустим, у вас есть Компонент, в котором вы проходите контент, а иногда это содержание имеет порывки на него, что вы действительно просто не хотите. Вы бы предпочли, если ваш компонент Box удалит полярность контента, который передается в него, независимо от того, что может быть этот контент.

Что ж, поскольку Svelte обладает стилями к компоненту по умолчанию, это не так просто, как вы можете изначально думать.

Итак, скажем, твоя довольно маленькая Компонент выглядит так:

Теперь скажем, вы используете его немного так:

  
This paragraph should not have a top margin!
  
This is a paragraph with top and bottom margins
  
This paragraph should not have a bottom margin!

Теперь, когда вы видите это, вы видите что-то вроде этого, что на самом деле не то, что вы хотели:

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

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

Решение простое и элегантное; Мы будем использовать : Глобал Модификатор в нашем CSS для удаления верхних/нижних полей.

Вот как мы собираемся сделать это, просто добавьте эти два правила к CSS для Box.svelte. вот так:

section :global(> :first-child) {
  margin-top: 0;
}
section :global(> :last-child) {
  margin-bottom: 0;
}

Теперь вы должны увидеть ваш Компонент во всей его запасной славе!

🎉 Хуцца !! Мы сделали это! Я знаю настоящий игрок, я знаю!

Это будет генерировать некоторые стили, которые все еще считаются составляющими:

Вы увидите, что стиль абзаца переопределяется :Первый ребенок Стиль, потому что это более «конкретно», что позволяет вам иметь стили, применяемые к содержимому слота, а также переопределении любых стилей, которые вам нужны в родительском компоненте.

Круто справа!? 🤓

Вот наш компонент в своей полной славе:

Оформить заказ SVELTE REPL здесь играть с этим.

Вы можете использовать : Глобал Модификатор, чтобы сделать много других прохладных вещей, это всего лишь один конкретный пример, чтобы получить ваш разум Active 🧠

Спасибо за чтение до настоящего времени 🙏, надеюсь, вам понравилось!

Есть другие советы, идеи, обратная связь или исправления? Дай мне знать в комментариях! 🙋♂. ️

Вы можете найти меня в Twitter ( @danawoodman ) или github ( Danawoodman. )

фото Джошуа Арагон на Бессмысленно

Оригинал: “https://dev.to/danawoodman/svelte-quick-tip-styling-slot-content-with-global-1ia4”