PrimeFaces 13 Dialog自定义响应式宽度：如何覆盖内联样式？

我是一名前端开发者，刚加入一个使用PrimeFaces 13的Java项目团队。正在构建一个简单的Dialog，代码如下：

<p:dialog widgetVar="test" modal="true" resizable="false" draggable="false" header="Header" styleClass="my-dialog">

我希望按断点设置固定宽度，尝试的CSS如下：

body .ui-dialog /* 使用body .ui-dialog.my-dialog结果相同 */ {
    @media (max-width: 600px) {
        width: 300px;
    }
    @media (min-width: 601px) {
        width: 400px;
    }
    @media (min-width: 1000px) {
        width: 500px;
    }
}

但由于PrimeFaces会在元素上写入内联样式，我的CSS无法覆盖它。尝试使用自定义CSS类作为选择器，结果依然无效。目前找到的临时解决方案是：

.ui-dialog {
    @media (max-width: 600px) {
        min-width: 300px;
        max-width: 300px;
    }
}

请问有没有更好的方法？我知道有“responsive”选项，但我需要设置固定宽度。

补充说明：我不理解为何我的问题被关闭，这显然不是《如何用自定义样式覆盖PrimeFaces默认CSS？》的重复问题：

• 我的CSS是在PrimeFaces CSS之后加载的，这点我已在评论中说明
• 我的问题在于PrimeFaces写入的是element.style，即便我的CSS选择器更精准（甚至使用了styleClass中定义的自定义类），也无法覆盖PrimeFaces的内联CSS。

内容的提问来源于stack exchange，提问作者yangsunny