Как получить доступ к флажку библиотеки пользовательского интерфейса элемента и добавить отображение: нет?

Есть ли способ добавить display: none к стилю флажка «Элемент»? Имеет class="el-checkbox__inner".

Когда я меняю display на none в браузере, он исчезает, но я не могу получить доступ к этому элементу в коде.

Я пытался:

.el-checkbox__inner { 
    display: none !important 
}

Но не вышло.

Когда я использую:

label { 
    display: none !important 
}

Все элементы исчезают (как и должны).

Когда я использую:

label span { 
    display: none !important 
}

Заглавный элемент пропадает (как и должно).

Когда я использую:

label span span { 
    display: none !important 
}

Это не работает.

Я пробовал использовать :nth-of-type() и :nth-child(), но они не помогли.

Кто-нибудь знает, как получить доступ к элементу флажка?


Скриншот и код:

Снимок экрана

<el-checkbox-group v-model="itemsToBeBought">
    <el-checkbox
        v-for="(item, index) in shopItems"
        :label="item"
        :ref="item.category"
        :key="index"
    >
        <el-row>
            <el-card :body-style="{ padding: '0px' }">
                <img :src="item.image" class="image" />
                <div style="padding: 14px">
                    <span>{{ item.category }}</span>
                    <div class="bottom clearfix"></div>
                </div>
            </el-card>
        </el-row>
        <el-button
            class="showDetailsButton"
            type="info"
            icon="el-icon-message"
            @click="showDetails(item)"
        >ShowDetails</el-button>
    </el-checkbox>
</el-checkbox-group>

person Agnes Liszka    schedule 02.01.2021    source источник
comment
Вы пользуетесь ковшовой укладкой? если да, вам нужно использовать глубокий селектор stackoverflow.com/a/57704482/575468   -  person dreijntjens    schedule 03.01.2021
comment
глубокий селектор решил проблему - большое спасибо :)   -  person Agnes Liszka    schedule 04.01.2021