laravel jetstream 组件如何将活动类作为参数传递答案

【问题标题】：laravel jetstream component how to pass active class as parameterlaravel jetstream 组件如何将活动类作为参数传递
【发布时间】：2022-07-24 00:01:15
【问题描述】：

我正在使用 Laravel Jestream。我还为我的应用程序添加了“深色主题”支持。我正在使用 Laravel 8 Jetstream 和 Tailwind 3。

到目前为止，我已经成功地为resources/views/navigation-menu.blade.php 文件中的导航链接设置了暗类，如下所示：

<!-- Navigation Links -->
<div class="hidden space-x-8 sm:-my-px sm:ml-10 sm:flex">
    <x-jet-nav-link class="dark:text-gray-200 dark:hover:text-blue-300" href="{{ route($ruta_dashboard) }}" :active="request()->routeIs($ruta_dashboard)">
        {{ __('Dashboard') }}
    </x-jet-nav-link>
</div>

到目前为止一切顺利。

但是，当我尝试像这样将暗类添加到 dark:active:bg-amber-200 类时

<!-- Navigation Links -->
<div class="hidden space-x-8 sm:-my-px sm:ml-10 sm:flex">
    <x-jet-nav-link class="dark:text-gray-200 dark:hover:text-blue-300 dark:active:bg-amber-200" href="{{ route($ruta_dashboard) }}" :active="request()->routeIs($ruta_dashboard)">
        {{ __('Dashboard') }}
    </x-jet-nav-link>
</div>

它不起作用。

如何将暗模式的活动类传递给 Laravel Jetstream 组件？

【问题讨论】：

您使用的是什么版本的 Tailwind？我认为在 Tailwind 1 和 2 中，堆叠黑暗和活跃并不能无缝地工作
@IGP Tailwind 3

标签： laravel jetstream

【解决方案1】：

早上好，亲爱的，我遇到了同样的问题，我设法找到了解决方案。事实证明，必须在文件夹中的 Jetstream 组件内指定暗类：

vendor/laravel/jetstream/resources/views/components

修改组件示例：

@props(['active'])

@php
$classes = ($active ?? false)
            ? 'block pl-3 pr-4 py-2 border-l-4 border-indigo-400 text-base font-medium text-indigo-700 bg-indigo-50 focus:outline-none focus:text-indigo-800 focus:bg-indigo-100 focus:border-indigo-700 transition dark:bg-slate-700 dark:border-slate-500'
            : 'block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300 focus:outline-none focus:text-gray-800 focus:bg-gray-50 focus:border-gray-300 transition dark:hover:border-slate-500';

<a {{ $attributes->merge(['class' => $classes]) }}>
    {{ $slot }}
</a>

我在这个视频（11:35 分）中得到了这些信息。

https://www.youtube.com/watch?v=jU3IrFmOGNQ

应该澄清一下，它是西班牙语，但可以理解

告诉我们您是否能够解决问题

干杯

【讨论】：