InputStylerExample1.razor

@namespace MudExtensions.Docs.Examples
@using MudBlazor.Utilities

<MudGrid >
    <MudItem xs="12" sm="8" Style="background-color: var(--mud-palette-background-gray)">
        <MudStack>
            <MudText>Default TextFields</MudText>
            <MudStack Row="true">
                <MudTextField T="string" Label="Test" />
                <MudTextField T="string" Label="Test" Variant="Variant.Outlined" />
                <MudTextField T="string" Label="Test" Variant="Variant.Filled" />
            </MudStack>
            <MudDivider />
            <MudText Class="mt-4">Modified TextFields</MudText>
            <MudStack Row="true">
                <MudTextField Class="text-field" T="string" Label="Test" />
                <MudTextField Class="text-field label-background-gray" T="string" Label="Test" Variant="Variant.Outlined" />
                <MudTextField Class="text-field label-background-transparent" T="string" Label="Test" Variant="Variant.Filled" />
            </MudStack>
            <MudDivider />
            <MudText Class="mt-4">Modified Selects</MudText>
            <MudStack Row="true">
                <MudSelect T="string" Class="text-field" Label="Test" AnchorOrigin="Origin.BottomCenter">
                    <MudSelectItem Value="@("a")">Colored With InputStyler</MudSelectItem>
                </MudSelect>
                <MudSelect T="string" Class="text-field label-background-gray" Label="Test" Variant="Variant.Outlined" AnchorOrigin="Origin.BottomCenter">
                    <MudSelectItem Value="@("a")">Colored With InputStyler</MudSelectItem>
                </MudSelect>
                <MudSelect T="string" Class="text-field label-background-transparent" Label="Test" Variant="Variant.Filled" AnchorOrigin="Origin.BottomCenter">
                    <MudSelectItem Value="@("a")">Colored With InputStyler</MudSelectItem>
                </MudSelect>
            </MudStack>
        </MudStack>

        <MudInputStyler Selector=".text-field" BaseColor="@(_baseColor?.ToString())" TextColor="@(_textColor?.ToString())" LabelColor="@(_labelColor?.ToString())"
                        BorderColor="@(_borderColor?.ToString())" LabelStyle="@_labelStyle" Always="_always" />
        <MudInputStyler Selector=".label-background-gray" LabelBackgroundColor="@("var(--mud-palette-background-gray)")" />
        <MudInputStyler Selector=".label-background-transparent" LabelBackgroundColor="transparent" />
        <MudInputStyler />
    </MudItem>

    <MudItem xs="12" sm="4">
        <MudStack Spacing="4">
            <MudSwitchM3 @bind-Value="_always" Color="Color.Secondary" Label="Always" />
            <MudColorPicker @bind-Value="_baseColor" Label="Base Color" Variant="Variant.Outlined" ColorPickerView="ColorPickerView.Grid" Clearable="true" />
            <MudColorPicker @bind-Value="_textColor" Label="Text Color" Variant="Variant.Outlined" ColorPickerView="ColorPickerView.Grid" Clearable="true" />
            <MudColorPicker @bind-Value="_labelColor" Label="Label Color" Variant="Variant.Outlined" ColorPickerView="ColorPickerView.Grid" Clearable="true" />
            <MudColorPicker @bind-Value="_borderColor" Label="Border Color" Variant="Variant.Outlined" ColorPickerView="ColorPickerView.Grid" Clearable="true" />
            <MudTextField @bind-Value="_labelStyle" Label="Label Style" Variant="Variant.Outlined" />
            <MudButton OnClick="Reset">Reset</MudButton>
        </MudStack>
    </MudItem>
</MudGrid>

@code {
    MudColor? _baseColor;
    MudColor? _textColor;
    MudColor? _labelColor;
    MudColor? _borderColor;
    bool _always;
    string? _labelStyle;

    private void Reset()
    {
        _baseColor = null;
        _textColor = null;
        _labelColor = null;
        _borderColor = null;
        StateHasChanged();
    }
}