How to style the button of a RadzenFileInput like a RadzenButton?

Radzen.Blazor Components
1

I have this code:

    <RadzenColumn>
        <RadzenFileInput TValue="string"
                         ChooseText="Load YAML"
                         Accept=".yaml, .yml"
                         ValueChanged="OnYamlLoadedAsync"
                         Disabled="Item is null"
                         class="w-100"
        @ref="_loadYamlInput" />
    </RadzenColumn>
    <RadzenColumn>
        <RadzenButton class="w-100"
                      Text="Save YAML"
                      ButtonStyle="ButtonStyle.Primary"
                      Disabled="Item is null"
                      Click="OnSaveYamlAsync" />
    </RadzenColumn>

However, this looks like this:

image
image761×64 2.31 KB

How to style the file upload component so the button looks like theother button?

2

You can use manual upload from a regular RadzenButton:

image
image1920×1080 187 KB

3

But this still displays the Choose button. I want the Choose button to look like my other buttons and basically have the behaviour of the RadzenFileInput.

4

You can try with this custom CSS:

:root {
    --rz-upload-choose-background-color: var(--rz-primary);
    --rz-upload-choose-color: var(--rz-on-primary);
    --rz-upload-choose-hover-background-color: var(--rz-primary);
    --rz-upload-choose-hover-color: var(--rz-on-primary);
    --rz-upload-choose-active-background-color: var(--rz-primary);
    --rz-upload-choose-active-color: var(--rz-on-primary);
}