Предотвращение стилизации родительского сайта, влияющего на стилизацию компонента Vue JS

Question

Я создаю плагин Vue JS с некоторыми стилями области видимости, он отлично работает на другом веб-сайте при включении его в качестве компонента, например: <my-component></my-component>.

Тем не менее, стиль, который я добавил к компоненту, равен scoped для компонента, что означает, что он не влияет на стилизацию родительского сайта, однако стилизация родительского сайта НЕ влияет на стилизацию моего компонента, есть ли способ предотвратить это, не будучи сверхспецифичным со стилем моего компонента и используя !important для всего?

Answer 1

Стили Scoped работают, добавляя специальный ключ к вашим селекторам.Таким образом, ваш компонент не повлияет на другие компоненты.Родительские компоненты по-прежнему могут влиять на стили вашего компонента.И глобальные стили также могут вмешиваться.

Ну, у вас есть 2 варианта, если вы не хотите использовать !important

Во-первых, и предпочтительнее - использовать конкретные названия БЭМ.Это действительно легко реализовать с помощью sass (scss).Например,

.mycompoment{
    background:#fff;

    &--body{
        color:#eb0b0;

        &--title{
            font-size:5rem;
        }
    }
    &--footer{
    position:relative;
    }
    //etc
}

, который будет компилироваться в следующий код:

.mycompoment {
    background: #fff;
}

.mycompoment--body {
    color: #eb0b0;
}

.mycompoment--body--title {
    font-size: 5rem;
}

.mycompoment--footer {
    position: relative;
}

Другой вариант - повысить специфичность вашего селектора.Попробуйте использовать более прямые потомки селекторов.> Но, тем не менее, внешний css может по-прежнему влиять на значения, о которых вы даже не думаете.Например, position:absolute; top:-20px; или box-sizing / display / opacity и многие другие реквизиты, о которых вы не знаете.