The Styles class provides a convenient way to build and manage CSS styles in your Blazor email components. You can create a Styles instance and use the Set method to define styles in a type-safe manner.

​
Creating Styles

To create a new instance of Styles, you can either start from scratch or combine existing styles. Here’s an example of how to initialize a Styles instance:

private readonly Styles m_Style = new Styles()
    .Set(x => x.Display, Display.Block)
    .Set(x => x.Border, "none")
    .Set(x => x.Outline, "none")
    .Set(x => x.TextDecoration, TextDecoration.None);

​
Explanation of the Code

  • Set Method: The Set method takes a lambda expression that points to a property in the IStyleOptions interface and the value you want to assign to that property. The method converts the property name into a CSS property name and adds it to the internal list of styles.

  • Using Enums: If you use an enum for a style property, ensure that the enum values have the CssValueAttribute applied to them. This attribute maps the enum value to a corresponding CSS value.

​
Combining Styles

You can combine multiple Styles instances using the Combine method. For example:

var additionalStyles = new Styles()
    .Set(x => x.Margin, "10px")
    .Set(x => x.Padding, "5px");

var combinedStyles = m_Style.Combine(additionalStyles);

​
Raw String Usage

If you prefer to define styles as raw strings, you can also use the style attribute directly in your components. For example:

<div style="font: bold; color: red;">
    This text is bold and red.
</div>

​
Implicit Conversion

The Styles class supports implicit conversion to a string, so you can directly use it in attributes or for rendering:

<div style="@m_Style">
    Styled content goes here.
</div>

​
Checking for Empty Styles

You can check if a Styles instance is empty by using the IsEmpty method:

if (m_Style.IsEmpty())
{
    // Handle empty styles case
}

​
Summary

The Styles class provides a robust and type-safe way to manage CSS styles in your Blazor components. You can easily create, combine, and convert styles while maintaining a clean and readable codebase.

RendererTesting