[英]CSS styles for <x-> tags
我需要幫助將顏色設置為 html div。 我使用 Laravel 8,當然我安裝了簡單的身份驗證模塊 Breeze 和 tailwind css 框架。 但現在我需要更改授權卡顏色。 我所有的視圖都使用刀片模板引擎,這是我的訪客刀片源:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap">
<!-- Styles -->
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
</head>
<body>
<div class="font-sans text-gray-900 antialiased">
{{ $slot }}
</div>
</body>
</html>
和我的登錄查看源代碼:
<x-guest-layout>
<x-auth-card>
<x-slot name="logo">
<a href="/">
<img class="header-logo-image" width="100" height="100" src="{{ asset('images/welcome_images/logo.svg') }}" alt="Logo">
</a>
</x-slot>
<!-- Session Status -->
<x-auth-session-status class="mb-4" :status="session('status')" />
<!-- Validation Errors -->
<x-auth-validation-errors class="mb-4" :errors="$errors" />
<form method="POST" action="{{ route('login') }}">
<!-- This is form for posting my request -->
</form>
</x-auth-card>
</x-guest-layout>
如您所見,我在我的訪客刀片中使用 $slot 變量來使用“x-”標簽注入登錄頁面內容。 但是我怎樣才能改變背景顏色呢? 我嘗試在標簽中使用 'class="lol" style="background-color: white;"' 來設置它,但沒有成功。
解決了。 我當然要解釋一下。 首先,我們需要找出模板中使用了哪些類來構造容器。 我在瀏覽器中使用了檢查元素 function,我發現用作主要元素的“min-h-screen”class。 好吧,現在我可以使用內部 CSS 樣式為這個 class 設置顏色。 這奏效了。
<!-- Internal styles -->
<style type="text/css">
.min-h-screen {
background-color: #1D2026;
}
Ps 最重要的是在guest Blade 模板中插入此代碼,以便將styles 應用於$slot 變量中的內容。
建議是:在你的laravel申請go到\resources\views\vendor\jetstream\components\authentication-card.blade
我花了整整一年才弄明白
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.