Understanding your implementation of MergeStyles...

[limefrogyank]

I forked your repo, updated Blazor, and have gotten some basic stuff working. I have one small piece that I'm not sure I understand (or maybe you just didn't implement yet).

Many of the rules that are in the StyleSets on the main Fabric React repo are not CSS rules but actual class names. For example, this is the style class for Icon:

import { IIconStyleProps, IIconStyles } from './Icon.types';

export const getStyles = (props: IIconStyleProps): IIconStyles => {
  const { className, iconClassName, isPlaceholder, isImage, styles } = props;

  return {
    root: [
      isImage && 'ms-Icon-imageContainer',
      isPlaceholder && 'ms-Icon-placeHolder',
      {
        display: 'inline-block'
      },
      isPlaceholder && {
        width: '1em'
      },
      isImage && {
        overflow: 'hidden'
      },
      iconClassName,
      className,
      styles && styles.root,
      styles && styles.imageContainer
    ]
  };
};

The first two lines in the root array are prime examples of what I'm talking about. Now, I understand how to modify the Style called Root in your default StyleSet class to add all the css rules. You've made it incredibly easy by adding all the css rules as properties. However, I'm not sure how to incorporate these extra class names into your implementation of Style.

Any help would be appreciated.

(And thanks for all the hard work on the MergeStyles port!)

[limefrogyank]

OK, I figured it out:

var iconBaseStyle = new Style
{
    //set any css rules here
};
var iconExtraClasses = new Style();
iconExtraClasses = "ExtraClassName";

var iconStyle = new Style();
iconStyle.Root = new Style(new[] {iconBaseStyle, iconExtraClasses});

[galvesribeiro]

I didn't started the port. The guy who asked for it looks like is out of time to maintain the project.

I'll return to it early next month and probably come out with some better idea for the project structure just like we did for material design.

[danielmeza]

Hi guys, I’m sorry for the delayed response, I was going o busy with my company and I have married two months ago and my time was limited. When I push the code the approach was to recreate the controls in the same way as the react library that’s why I start with the styles, but when I finish the implementation somebody from the React team told us that the was changing the way to create controls. So the library was implemented in a 85% with the mayor unit test implemented and passing, the next step east to start create the controls based in their states by changing the styles the we render its, but the time was short and the Stack of tools to start create control was to big. So I think it’s better to wait until the react team change it’s way to create controls and then restart the project again. That was 8 moths ago so we can now look if that happens and try.