在ionic中自定义弹出框modal的样式不起作用

今天在使用ionic做一个modal模态框弹出一个选择框时，想要做一个弹出框居中并且周围半透明可以看到后面元素的内容的效果，但是发现无论如何也不能够设置这个弹出框的样式，但是又不得不做。
又发现网上几乎没有相关的文章说这个问题，于是我自己就写一篇记录一下吧。
首先看一下模态框的节点，发现是这个样子的。

怪不得样式不起作用，我先后尝试了在调用模态框的组件和模态框引用的组件里面书写css样式，但是这个模态框并不属于这两个组件中的任何一个，当然不能起作用了。

翻一下官方文档，看到了这段话。
In Angular, the CSS of a specific page is scoped only to elements of that page. Even though the Modal can be presented from within a page, the ion-modal element is appended outside of the current page. This means that any custom styles need to go in a global stylesheet file. In an Ionic Angular starter this can be the src/global.scss file or you can register a new global style file by adding to the styles build option in angular.json.
简单的说，就是要把样式写在全局样式里面。全局样式是哪一个呢？就找到angular.json里面的style的路径。然后在这个样式表里面写，就大功告成啦！