How to add inline CSS style in Custom Text of Views?

I have already setup fields for user to input color code (e.g. "#123000") to a content type. Now I need to modify the inline style color / background-color with the given value. I tried to do this in my Custom Text field:

    <div class="box" style="color: {{ color_field }}">
        <h2>{{ title }}</h2>
        <span class="description">{{ body }}</span>
    </div>

But the rendered output would become:

    <div class="box">
        <h2>Dummy</h2>
        <span class="description">Some dummy description...</span>
    </div>

I went as far as creating my own Twig function implementation:

    <div class="box" {{ my_dummy_function(color_field) }}>
        <h2>{{ title }}</h2>
        <span class="description">{{ body }}</span>
    </div>

The function would supposedly output style="color: color_field_value", but the whole attribute would be "eaten" by Drupal's rendering chain. Even adding a | raw filter after that would not change a thing.

    <div class="box">
        <h2>Dummy</h2>
        <span class="description">Some dummy description...</span>
    </div>

In desperate, I modified my dummy Twig function to output hello="world", and the attribute would be rendered normally:

    <div class="box" hello="world">
        <h2>Dummy</h2>
        <span class="description">Some dummy description...</span>
    </div>

But if it output something like hello="color: world":

    <div class="box" hello=" world">
        <h2>Dummy</h2>
        <span class="description">Some dummy description...</span>
    </div>

So it seems there are some keyword-based filtering going on. And I can't seem to have a way to render anything resembling inline CSS. Is there anyway I can achieve my goal?

นี่เป็นปัญหาที่ฉันพบหลายครั้ง และโดยส่วนตัวแล้ว ฉันไม่เคยโชคดีเลยที่จะแสดงรูปแบบอินไลน์ในช่อง Views ที่เขียนใหม่ผ่าน UI

วิธีแก้ไขของฉันคือสร้างไฟล์เทมเพลตที่รับผิดชอบในการแสดงผลฟิลด์มุมมองเสมอ เนื่องจากจะทำให้คุณสามารถใช้สไตล์อินไลน์ได้

ในกรณีของคุณ คุณสามารถมีไฟล์ในโฟลเดอร์ / templates ของธีมของคุณ (ฉันมีไฟล์อยู่ในไดเร็กทอรีย่อย /views) โดยมีชื่อไฟล์ดังนี้:

views-view-fields--your-view-name.html.twig

จากนั้นคุณจะต้องปรับแต่งมาร์กอัปที่คุณมีอยู่แล้วเล็กน้อย:

<div class="box" style="color: {{ fields.field_color_field.content }}">
    <h2>{{ fields.title.content }}</h2>
    <span class="description">{{ fields.body.content }}</span>
</div>