Class overriding (for text color here) does not work for flux:input

[jensolafkoch]

Not sure this is a bug, but could be.

I try to override the text color for an input field with for example !text-red-600, but after a build nothing changes.

<flux:input
   type="text"
   label="Some label"
   value="{{ $someVar }}"
   class="
    !text-red-600
   "
/>

The custom class is applied by Flux to the container div for the input field, not the input field itself - a bug?

If you look at the source code views/flux/input/index you find:

<div class="w-full relative block group/input !text-red-600 placeholder-gray-300" data-flux-input="">
<input type="text" class="…" …>

That does not work for the child div's.

(Besides the text in the field itself, I also tried to change the label text color but found no way to do it.)

[joshhanley]

I just tested with the long form way too, using the code below, and it didn't work either. It still puts the text colour class on the input wrapping div.

<flux:field>
    <flux:label>Some label</flux:label>

    <flux:input type="text" value="value" class="!text-red-600" />
</flux:field>

[MartijnCuppens]

The [&>[data-flux-control]] modifier can help you out here.

<flux:input class="[&>[data-flux-control]]:text-red-500" value="I'm red" />

But the behaviour is a little inconsistent. For textarea's or selects, you'll need !text-red-500:

<flux:textarea class="!text-red-500" required label="I'm red" />

[jensolafkoch]

@MartijnCuppens

Thanks a lot! :-) Well, inconsistent indeed, and not documented at all, I think. I wish it was. :-)

Fiddling with overrides in situations which are a bit off the beaten path is a really inconvenient part of working with Flux ...