Запретить глобальные css, чтобы повлиять на мои реагировать npm элементы пакета

Question

Я разработал пакет реагирования npm, содержащий элемент. при установке в реагирующий проект ul css родительского проекта влияет на пакет npm,

Как инкапсулировать пакет npm, чтобы предотвратить воздействие на него любого глобального css? без использования Iframe.

например:

Глобальный проект с использованием пакета npm

ul {
 padding : 30px
}

всех элементов внутри моего пакета npm будет иметь отступ 30px ...

Answer 1

Это интересно. Поэтому мой мыслительный процесс будет выглядеть следующим образом: -

Первая попытка

1. Оберните элемент пакета именем некоторого класса, чтобы указать, что ниже этого стиля стили не должны проходить. Ex. class = "limited-from-project-styles"
2. Затем в свои проекты добавьте такие стили, как это -

body :not(.restricted-from-project-styles) {
 // Apply all your project styles here.
}

Но это не работает, потому что сначала игнорируется элементы.

Пример. - Попробуйте запустить это при переполнении стека. Элемент, находящийся непосредственно внутри верхней панели, игнорируется, но это не дочерние элементы.

body :not(.top-bar) * {
  display: none;
}

Вторая попытка

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

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

Хмм .... Я хотел бы, чтобы случайные имена классов ограничивали стили, передаваемые от родителя. Но я также хотел бы игнорировать стили HTML -tag.

Третья попытка

• Применить сброс css стилей, привязанных к элементам пакета root

Для эффективного управления стилями в городе есть новый парень - компоненты styleled.

Смотрите это видео для ознакомления

Надеюсь, это даст вам отправную точку.

Answer 2

Если вы добавите указанное имя класса c к вашим элементам, глобальные правила без этого имени класса будут переопределены вашим правилом. Например:

Ваши компоненты:

    <div class="my-component">
        <ul> ... </ul>
    </div>

Ваш CSS:

.my-component ul {
    padding: 10px;
}

Теперь, если кто-то добавит

ul {
    padding: 30px;
}

, это будет не влияет на ваш компонент. Это потому, что ваше правило CSS более конкретно c (поскольку для него требуется класс my-component).

Обратите внимание, что правила, которые вы не указали , будут затронуты глобальным CSS.

Answer 3

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

, который вы можете использовать

1. МЕНЬШЕ
2. Chokidar (наблюдатель)

для предотвращения глобального css влияния на наш локальный css при создании нового пакета

меньше сгенерированного нового файла с классом префикса вашего css и наблюдателем постоянно создавайте свой css с классом префикса

предположим, что у вас есть файл styles1. css и код удара

ul {
 padding : 30px
}

, тогда вы можете присоедините префиксный класс к вашему классу с помощью

.style1 {
    @import (less) 'style1.css';
}

, затем сгенерированный файл будет иметь код удара

.style1 ul {
 padding : 30px
}

, затем вы можете добавить класс .style1 к вашему родительскому div вашего пакета, например,

<div className="style1">
  <ul>
     <li>1</li>
     <li>2</li>
     <li>3</li>
  </ul>
</div>

Вы можете проверить мой ПРИМЕР (chokidar + less)

Answer 4

Лучшее, что вы можете сделать, - это использовать CSS все свойство :

.my-app-container * {
    all: initial;
    // or
    // all: unset;
}

Свойство Все сокращения CSS сбрасывает все свойства элемента

Ключевое слово initial CSS применяет начальное значение (или значение по умолчанию) свойства к элементу. Это начальное значение устанавливается браузером.