如何为Laravel Livewire组件根标签添加类名？

问题原因 #

Livewire 默认不会自动将组件调用时传递的属性附加到根元素上，只有当组件的根元素明确通过 {{ $attributes }} 接收属性时，外部传递的 class 等属性才会生效。

解决方法 #

方法一：覆盖组件视图（无需修改组件控制器）

在项目的 resources/views/vendor/livewire 目录下创建 hello.blade.php 文件（若 vendor/livewire 目录不存在则手动创建），将内容修改为：

<div {{ $attributes }}>
    Hello world
</div>

之后调用组件时使用 <livewire:hello class="foobar" />，根 div 就会渲染出 foobar 类。

方法二：前端JS动态添加类（完全不修改组件相关文件）

在页面的脚本中添加以下代码，利用Livewire初始化事件为目标组件根元素追加类名：

document.addEventListener('livewire:initialized', () => {
    // 匹配所有hello组件的根元素
    document.querySelectorAll('[wire\\:component="hello"]').forEach(el => {
        el.classList.add('foobar');
    });
});

页面加载完成后，所有hello组件的根div都会自动添加上foobar类。

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