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: {{ $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 样式只会应用到本组件内的元素，不会影响页面上其他同名 class 的元素。

多文件组件 ​

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

text
resources/views/components/counter/
├── counter.php
├── counter.blade.php
└── counter.css          # Scoped styles

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
/* What you write */
.btn { background: blue; }

/* What gets served */
[wire\:name="counter"] {
    .btn { background: blue; }
}

这利用了 Livewire 加在每个组件根元素上的 wire:name 属性，确保样式只作用于该组件内部。

定位组件根元素 ​

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

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

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

这会给组件最外层元素加上边框和内边距。

全局样式 ​

有时你需要的是全局生效、而非限定在单个组件内的样式。给 style 标签加上 global 属性即可：

单文件组件 ​

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

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

多文件组件 ​

创建扩展名为 .global.css 的文件：

text
resources/views/components/counter/
├── counter.php
├── counter.blade.php
├── counter.css           # Scoped styles
└── counter.global.css    # Global styles

组合作用域与全局样式 ​

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

blade
<?php

use Livewire\Component;

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

<div class="counter">
    <h1 class="title">My Counter</h1>
</div>

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

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

样式去重 ​

同一组件在页面上有多个实例时，Livewire 会自动去重样式。无论有多少个实例，样式只会加载一次。

何时使用组件样式 ​

在以下情况使用作用域样式：

  • 样式只针对单个组件
  • 你想避免 CSS class 名冲突
  • 你在构建可复用、自包含的组件

在以下情况使用全局样式：

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

用 @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 做客户端交互