I'm not able to change the style of DevExtreme's popup modal dialog using CSS

Question

I have Vue.js app where use DevExtreme's DxDataGrid and DxPopup components. The datagrid contains a list of records (rows). When I double click particular row, the popup modal dialog opens and shows appropriate fields. That's fine.

The issue is I'm not able to change the style of popup modal dialog using CSS selectors in my component. I need to change all - border, colors, size of fields, fonts and so on.

The code looks as following:

1. The list:

<template>
  <div>
    <DxDataGrid
      :data-source="testArray"
      :row-alternation-enabled="true"
      :show-borders="true"
      :columns="columns"
      @row-dbl-click="rowDblClick"
    >
    </DxDataGrid>
    <v-app-types-by-product-modal ref="appTypesByProductModal" />
  </div>
</template>

<script>
import "devextreme/dist/css/dx.light.css";
import { DxDataGrid } from "devextreme-vue/data-grid";
import VAppTypesByProductModal from "./v-app-types-by-product-modal.vue";

export default {
  components: {
    DxDataGrid,
    VAppTypesByProductModal,
  },
  data() {
    return {
      testArray: [
        { Id: 1, ProductName: "Product 1", Status: "Yes", StageName: "Begin", SignDate: "11.07.2022" },
        { Id: 2, ProductName: "Product 2", Status: "Yes", StageName: "Middle", SignDate: "12.07.2022" },
        { Id: 3, ProductName: "Product 3", Status: "No", StageName: "End", SignDate: "13.07.2022" },
      ],
      columns: [
        { dataField: "Id", caption: "ID", dataType: "number", width: "50px" },
        { dataField: "ProductName", caption: "PRODUCT", dataType: "string", width: "150px" },
        { dataField: "Status", caption: "STATUS", dataType: "string", width: "150px" },
        { dataField: "StageName", caption: "STAGE", dataType: "string", width: "150px"},
        { dataField: "SignDate", caption: "DATA", dataType: "string",width: "150px"},
        {
          type: "buttons",
          width: "150px",
          buttons: [
            {
              hint: "Edit",
              icon: "edit",
              visible(e) {
                return !e.row.isEditing;
              },
              onClick: (e) => {
                this.$refs.appTypesByProductModal.showModal(e.row.data);
              },
            },
            {
              hint: "Remove",
              icon: "remove",
              visible(e) {
                return !e.row.isEditing;
              },
            },
          ],
        },
      ],
      selectedElement: {},
    };
  },
  methods: {
    rowDblClick(e) {
      this.$refs.appTypesByProductModal.showModal(e.data);
    },
  },
};
</script>

<style scoped>
</style>

2. The modal dialog:

<template>
  <v-modal-dialog
    :visible="isModalVisible"
    title="Title"
    :width="500"
    :height="500"
    @hiding="onHiding"
  >
    <DxForm :form-data="selectedItem" label-mode="static">
      <DxSimpleItem data-field="Id" :is-required="true" />
      <DxSimpleItem data-field="ProductName" :is-required="true" :editor-options="{disabled: true}" />
      <DxSimpleItem data-field="Status" />
      <DxSimpleItem data-field="StageName" />
      <DxSimpleItem data-field="SignDate" />
    </DxForm>
    <DxToolbarItem
      widget="dxButton"
      toolbar="bottom"
      :options="okButtonOptions"
    />
    <DxToolbarItem
      widget="dxButton"
      toolbar="bottom"
      :options="closeButtonOptions"
    />
  </v-modal-dialog>
</template>

<script>
import "devextreme/dist/css/dx.light.css";
import { DxForm, DxSimpleItem } from "devextreme-vue/form";
import { DxToolbarItem } from "devextreme-vue/popup";
import VModalDialog from "./v-modal-dialog.vue";

export default {
  components: {
    VModalDialog,
    DxForm,
    DxSimpleItem,
    DxToolbarItem,
  },
  data() {
    return {
      isModalVisible: false,
      selectedItem: {},
      okButtonOptions: {
        text: "Ok",
        onClick: () => {
          this.clearFormData();
          this.isModalVisible = false;
        },
      },
      closeButtonOptions: {
        text: "Close",
        onClick: () => {
          this.clearFormData();
          this.isModalVisible = false;
        },
      },
    };
  },
  methods: {
    showModal(item) {
      this.selectedItem = {...item};
      this.isModalVisible = true;
    },
    clearFormData() {
      this.selectedItem = null;
    },
    onHiding() {
      this.clearFormData();
      this.isModalVisible = false;
    },
  },
};
</script>

<style scoped>
</style>

3. The modal dialog base:

<template>
  <DxPopup
    v-bind="$attrs"
    v-on="$listeners"
    :hide-on-outside-click="false"
    :drag-enabled="true"
    position="center"
    @hiding="onHiding"
  >
    <slot v-for="(_, name) in $slots" :name="name" :slot="name" />
  </DxPopup>
</template>

<script>
import "devextreme/dist/css/dx.light.css";
import { DxPopup } from "devextreme-vue/popup";

export default {
  inheritAttrs: false,
  components: {
    DxPopup,
  },
  data() {
    return {}
  },
  methods: {
    onHiding() {
      this.$emit("hiding");
    },
  },
};
</script>

<style scoped>
/* ::v-deep .dx-popup-normal {
    border-radius: 20px !important;
}
::v-deep .dx-popup-title {
    border-bottom: 0px !important;
} */
/* #dxPopupContainer .dx-popup-normal {
    border-radius: 20px !important;
}
#dxPopupContainer .dx-toolbar {
    border-bottom: 0px;
} */
/* #dxPopupContainer {
    color: red;
    background-color: green;
} */
/* ::v-deep .dx-overlay-content .dx-popup-normal .dx-popup-draggable .dx-resizable {
    border-radius: 20px;
}
::v-deep .dx-toolbar > .dx-widget > dx-visibility-change-handler > dx-collection > dx-popup-title dx-has-close-button {
    border-bottom: 0px;
} */
/* #dxPopupContainer .dx-popup-normal {
    border-radius: 20px !important;
}
#dxPopupContainer .dx-popup-title {
    border-bottom: 0px !important;
} */
</style>

Here's the CodeSandbox demo:

https://codesandbox.io/s/overview-devextreme-data-grid-forked-5cegqw

As you can see I've tried something, but nothing helped.

How to overcome this issue?

Answer 1

Replace

::v-deep .dx-popup-normal {
    border-radius: 20px !important;
}

with

:global(.dx-popup-normal) {
    border-radius: 20px !important;
}