如何为Laravel Jetstream的x-jet-dialog-modal组件设置条件类

问题根源 #

你遇到的两个问题分别对应两个错误点：

1. 直接写class不生效：原dialog-modal组件的属性处理逻辑存在缺陷，手动声明的class属性会覆盖$attributes中自带的class值，Blade不会自动合并重复属性
2. Alpine写法报错：你在Alpine的动态属性:class中混用了Blade插值，且JS字符串拼接逻辑和PHP语法混写导致解析时触发非数值运算错误

第一步：修改dialog-modal组件代码 #

替换resources/views/vendor/jetstream/components/dialog-modal.blade.php的内容如下：

@props(['id' => null, 'maxWidth' => null, 'class' => ''])

{{-- 合并外层modal属性：默认属性 + 传入的attributes + 自定义class --}}
<x-jet-modal :id="$id" :maxWidth="$maxWidth" {{ $attributes->merge(['class' => $class]) }}>
    {{-- 若不需要自定义class作用于内容区，可删除下方的{{ $class }} --}}
    <div class="px-6 py-4 {{ $class }}">
        <div class="text-lg">
            {{ $title }}
        </div>

        <div class="mt-4">
            {{ $content }}
        </div>
    </div>

    {{-- 页脚样式逻辑：无自定义class则用默认背景色 --}}
    <div class="px-6 py-4 text-right {{ empty($class) ? 'bg-gray-100' : $class }}">
        {{ $footer }}
    </div>
</x-jet-modal>

如果你只需要修改外层模态框的样式，不希望自定义class污染内部内容区、页脚的样式，直接删除内容区和页脚的{{ $class }}即可。

第二步：调用组件的正确写法 #

不需要借助Alpine，直接用Blade条件语法写class就可以正常生效：

<x-jet-dialog-modal wire:model="confirmActionModalProfileFormVisible"
                    class="z-50 bg-opacity-100 {{ $confirm_action_profile_modal_color === 'danger' ? 'personal_danger_text' : 'personal_text' }}">
    {{-- 你的模态框title、content、footer内容 --}}
</x-jet-dialog-modal>

如果确实需要用Alpine实现前端无刷新动态切换类（不需要后端触发重渲染的场景），调整写法为：

<x-jet-dialog-modal wire:model="confirmActionModalProfileFormVisible"
                    x-data="{ modalColor: @js($confirm_action_profile_modal_color) }"
                    :class="'z-50 bg-opacity-100 ' + (modalColor === 'danger' ? 'personal_danger_text' : 'personal_text')">
    {{-- 模态框内容 --}}
</x-jet-dialog-modal>

用Laravel自带的@js指令把PHP变量输出为合法的JS变量，避免字符串解析错误。

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