How to apply style to few of many buttons in Vue.js app?

Question

The code looks as following:

<template>
  <DxPopup
    v-bind="$attrs"
    v-on="$listeners"
    :hide-on-outside-click="true"
    :drag-enabled="true"
    :wrapper-attr="popupAttributes"
    position="center"
    @hiding="onHiding"
  >
    <slot />
    <slot name="footer">
      <DxToolbarItem class="btn-default" widget="dxButton" toolbar="bottom" :options="okButtonOptions" />
      <DxToolbarItem class="btn-default" widget="dxButton" toolbar="bottom" :options="closeButtonOptions" />
    </slot>
  </DxPopup>
</template>

<script>
import { DxPopup } from 'devextreme-vue/popup';
import { DxToolbarItem } from 'devextreme-vue/popup';

export default {
    inheritAttrs: false,
    components: {
        DxPopup,
        DxToolbarItem
    },
    data() {
        return {
            popupAttributes: {
                id: 'popup-base',
            },

<style lang="scss">
#popup-base .dx-popup-normal {
  border-radius: 20px;
}
#popup-base .dx-texteditor-input {
  color: #8ca8cc;
  font-family: $primary-font-family;
  font-size: 15px;
}
#popup-base .dx-popup-title {
  border-bottom: 0px;
  font-weight: bold;
  font-size: $font-xl;
  color: $accent-color;
}
#popup-base .dx-label {
  color: $accent-color;
}
#popup-base .dx-button-content {
  border: 1px solid $accent-color;
  color: $accent-color;
}
</style>

The modal dialog looks as following:

How to apply #popup-base .dx-button-content rule only to two buttons at the bottom?

By adding dx-button-content to `class`? It's unknown what the components are in the example and how they work — Estus Flask, Sep 07 '22 at 09:46
Can't you use some CSS selectors for those? After inspecting them with your devtools? — kissu, Sep 07 '22 at 10:03
If you target them properly (thanks to your devtools) + use a [deep selector](https://stackoverflow.com/a/55368933/8816585), it should work out. — kissu, Sep 07 '22 at 10:11

score 0 · Answer 1 · answered Sep 07 '22 at 12:52

The solution:

export default {
    inheritAttrs: false,
    components: {
        DxPopup,
        DxToolbarItem
    },
    data() {
        return {
            popupAttributes: {
                id: 'popup-base',
            },
            okButtonOptions: {
                text: 'Сохранить',
                elementAttr: {
                    class: 'btn-default'
                },

<style lang="scss">
.btn-default {
    border: 1px solid $accent-color;
    color: $accent-color;
}

How to apply style to few of many buttons in Vue.js app?

1 Answers1