Стили⚓︎

Livewire позволяет включать стили, специфичные для компонента, прямо в ваши однофайловые и многофайловые компоненты. Эти стили автоматически ограничиваются областью видимости вашего компонента, предотвращая их влияние на другие части приложения.

Этот подход аналогичен тому, как работают теги <script> в компонентах Livewire, предоставляя единый способ держать PHP, HTML, JavaScript и CSS компонента в одном месте.

Локальные стили⚓︎

По умолчанию стили, определённые в вашем компоненте, ограничиваются только этим компонентом. Это означает, что ваши CSS-селекторы будут воздействовать только на элементы внутри вашего компонента, даже если такие же селекторы существуют в других местах страницы.

Однофайловые компоненты⚓︎

Добавьте тег <style> на корневом уровне вашего однофайлового компонента:

<?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

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

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

Как работает ограничение области видимости⚓︎

Livewire автоматически оборачивает ваши стили в селектор, который нацелен на корневой элемент вашего компонента. За кулисами ваш CSS преобразуется с использованием вложенности CSS:

/* Что вы пишете */
.btn { background: blue; }

/* Что отправляется браузеру */
[wire\:name="counter"] {
    .btn { background: blue; }
}

Это использует атрибут wire:name, который Livewire добавляет к корневому элементу каждого компонента, гарантируя, что стили применяются только внутри этого компонента.

Прицеливание на корневой элемент компонента⚓︎

Вы можете использовать селектор &, чтобы нацелиться непосредственно на сам корневой элемент компонента:

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

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

Это добавит рамку и отступы к самому внешнему элементу компонента.

Глобальные стили⚓︎

Иногда вам нужны стили, которые применяются глобально, а не ограничиваются одним компонентом. Добавьте атрибут global к вашему тегу style:

Однофайловые компоненты⚓︎

<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    # Глобальные стили

Комбинирование локальных и глобальных стилей⚓︎

Вы можете использовать одновременно локальные и глобальные стили в одном компоненте:

<?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 для внешних таблиц стилей:

При загрузке CSS из CDN
При подключении стилей сторонних библиотек

@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