Livewire 中文文档

主题

样式 ​

Livewire 允许你直接在单文件和多文件组件中包含组件特定的样式。这些样式会自动作用于你的组件，防止它们泄漏到应用程序的其他部分。

这种方法与 Livewire 组件中 <script> 标签的工作方式相似，让你可以将组件的 PHP、HTML、JavaScript 和 CSS 都保存在一个地方。

作用域样式 ​

默认情况下，在组件中定义的样式仅作用于该组件。这意味着你的 CSS 选择器只会影响组件内的元素，即使页面上其他地方存在相同的选择器。

单文件组件 ​

在单文件组件的根级别添加 <style> 标签：

blade
<?php

use Livewire\Component;

new class extends Component {
    public $count = 0;

    public function increment()
    {
        $this->count++;
    }
};
?>

<div>
    <h1 class="title">计数: {{ $count }}</h1>
    <button class="btn" wire:click="increment">+</button>
</div>

<style>
.title {
    color: blue;
    font-size: 2rem;
}

.btn {
    background: indigo;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
}
</style>

.title 和 .btn 样式只会应用到此组件内的元素，不会应用到页面上具有相同类的任何其他元素。

多文件组件 ​

对于多文件组件，创建一个与组件同名的 CSS 文件：

resources/views/components/counter/
├── counter.php
├── counter.blade.php
└── counter.css          # 作用域样式

counter.css

css
.title {
    color: blue;
    font-size: 2rem;
}

.btn {
    background: indigo;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
}

作用域如何工作 ​

Livewire 自动将你的样式包裹在一个针对组件根元素的选择器中。在幕后，你的 CSS 使用 CSS 嵌套进行转换：

css
/* 你写的 */
.btn { background: blue; }

/* 实际提供的 */
[wire\:name="counter"] {
    .btn { background: blue; }
}

这使用了 Livewire 添加到每个组件根元素的 wire:name 属性，确保样式仅应用于该组件内。

定位组件根元素 ​

你可以使用 & 选择器来定位组件的根元素本身：

blade
<style>
& {
    border: 2px solid gray;
    padding: 1rem;
}

.title {
    margin-top: 0;
}
</style>

这将为组件的最外层元素添加边框和内边距。

全局样式 ​

有时你需要全局应用的样式，而不是作用于单个组件。在样式标签中添加 global 属性：

单文件组件 ​

blade
<style global>
body {
    font-family: system-ui, sans-serif;
}

.prose {
    max-width: 65ch;
    line-height: 1.6;
}
</style>

多文件组件 ​

创建一个带有 .global.css 扩展名的文件：

resources/views/components/counter/
├── counter.php
├── counter.blade.php
├── counter.css           # 作用域样式
└── counter.global.css    # 全局样式

组合作用域和全局样式 ​

你可以在同一个组件中同时使用作用域和全局样式：

blade
<?php

use Livewire\Component;

new class extends Component {
    // ...
};
?>

<div class="counter">
    <h1 class="title">我的计数器</h1>
</div>

<style>
.title {
    color: blue;
}
</style>

<style global>
.counter-page-layout {
    display: grid;
    place-items: center;
}
</style>

样式去重 ​

当同一个组件的多个实例出现在页面上时，Livewire 会自动对样式进行去重。无论存在多少个组件实例，样式只会加载一次。

何时使用组件样式 ​

使用作用域样式当：

  • 样式特定于单个组件
  • 你想避免 CSS 类名冲突
  • 你正在构建可重用的、自包含的组件

使用全局样式当：

  • 你需要样式化组件外部的元素
  • 你正在定义跨多个组件使用的工具类
  • 你正在覆盖第三方库的样式

使用 @assets 加载外部样式表：

  • 从 CDN 加载 CSS 时
  • 包含第三方库样式时
blade
@assets
<link rel="stylesheet" href="https://cdn.example.com/library.css">
@endassets

浏览器支持 ​

作用域样式使用 CSS 嵌套，所有现代浏览器都支持（Chrome 120+、Firefox 117+、Safari 17.2+）。对于旧版浏览器支持，请考虑使用 CSS 预处理器或带有预编译样式表的 @assets 指令。

另请参阅 ​

  • JavaScript — 在组件中使用 JavaScript
  • 组件 — 组件格式和组织
  • Alpine — 使用 Alpine.js 的客户端交互性