What is the best way to style components

[kroudams]

I'm new to FluentUi. Would be greatful to hear what is the best way to style/override default style of the FluentUi Components?
As an example, I use mergeStyleSets and class names.

// myComponent.style.ts

type GetClassNamesReturnType = {
    [key: string]: any
}

export function getClassNames(customClassNames?: string, isUnderlined?: boolean): GetClassNamesReturnType {
    customClassNames = customClassNames ? " " + customClassNames : "";

    const baseClassName = "dropdown";
    const underlinedClass = `${baseClassName}--underlined`;

    if (isUnderlined) {
        customClassNames += (" " + underlinedClass);
    }

    return mergeStyleSets({
        [baseClassName]: [`${customClassNames}`, {
            textAlign: "start",
            "& .ms-Dropdown": {
                width: "18.75rem", /* ~300px */
                height: "2rem", /* ~32px */

                "&.is-disabled": {
                    pointerEvents: "none"
                },
                "&.is-disabled:focus::after": {
                    border: 0,
                }
            },
            [`&.${underlinedClass} .ms-Dropdown:focus::after`]: {
                borderWidth: 0,
                borderBottomWidth: "0.125rem" /* ~2px */
            },
            "& .ms-Label": {
                lineHeight: "1.25rem", /* ~20px */
            },
            [`&.${underlinedClass} .ms-Dropdown-title`]: {
                border: 0,
                borderBottom: "0.0625rem solid rgb(96, 94, 92)", /*~1px*/
                borderRadius: 0
            },
            ".ms-Dropdown.is-disabled .ms-Dropdown-title": {
                border: 0
            }
        }]
    });

};

// myComponent.tsx

export const Dropdown: FC<IDropdownProps> = (props) => {
    const { options, className: customClasses, underlined } = props;

    const dropdownClasses = useMemo(() => {
        return getClassNames(customClasses, underlined);
    }, [customClasses, underlined]);

    return (
        <FluentDropdown options={options}  className={dropdownClasses.dropdown} />
    )
}

Would it be considered a bad practice to use classes (className) instead of the inline styles (styles)?

[micahgodbolt]

In v8, mergeStyles is the preferred way to write styles. You can read all about it and see examples at https://github.com/microsoft/fluentui/blob/master/packages/merge-styles/README.md

The styles prop is the prefered method for styling components, when possible, as it allows targeting of individual parts (root, input, text etc) and those styles are mixed with the default styles, rather than trying to override them with more specific styles.