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?

Đây là sự cố mà tôi đã gặp phải nhiều lần và cá nhân tôi chưa bao giờ gặp may mắn khi xuất các kiểu nội tuyến trong trường Chế độ xem được viết lại thông qua giao diện người dùng.

Giải pháp của tôi luôn là tạo một tệp mẫu chịu trách nhiệm hiển thị các trường dạng xem, vì điều đó cho phép bạn sử dụng các kiểu nội tuyến.

Trong trường hợp của bạn, bạn có thể có tệp trong thư mục/mẫu của chủ đề (tôi có chúng trong thư mục con/lượt xem), với tên tệp như:

chế độ xem-chế độ xem--tên-chế độ xem của bạn.html.twig

Sau đó, bạn chỉ cần điều chỉnh một chút đánh dấu mà bạn đã có:

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