How to overwrite default office-ui-fabric css properties?

[NickSevens]

Category

• Question
• Typo
• Bug
• Enhancement / Suggestion
• Additional article idea

Expected or Desired Behavior

I'm trying to overwrite the default css for the Dialog component in Office UI Fabric.
I've added the className attribute to the Dialog instance to scope my modification, but now I wonder how I can access "default" class names from the component.

E.g.: I would like to change the max-width css property of the ms-Dialog-main class. Usually I would do this like:

.ms-Dialog--large {
  .ms-Dialog-main {
    max-width: 90%;
  }
}

and then reference the styles in my component with import dialogStyles from "./DialogStyles.module.scss";

Then, in my Dialog instance I would pass className={dialogStyles["ms-Dialog--large"]}.

However, since both .ms-Dialog--large and .ms-Dialog-main are being renamed in the DialogStyles.module.scss.ts file, the .ms-Dialog-main css properties are never touched (since the class name is changed to something like .ms-Dialog-main_051a9634.

Is there any way to disable the renaming on certain lines in the scss file? Or to separate compiling/not compiling scss files?

[zplume]

You can disable class renaming: http://www.n8d.at/blog/how-to-handle-automatic-css-class-renaming-in-spfx

You may need to "gulp clean" after making changes.

You would probably only want to override those styles for your web part (not every SPFx web part on the page), so you would want to nest the overrides within the class that you've applied to the root element of your web part.

In your scss file:

.yourUniqueWebPartClassNameHere_maybeWithAMiniGuidAtTheEndIfYouFeelLikeIt {
    .ms-Dialog--large {
        .ms-Dialog-main {
            max-width: 90%;
        }
    }
}

[NickSevens]

@zplume disabling class renaming as a whole would mean the custom .ms-Dialog--large class would not be renamed either. This class should be webpart scoped though, so renaming would make sense for that class - since I can reference it in my component with dialogStyles["ms-Dialog--large"] or something like it.
I might be missing something, but ideally I would like to end up with a css looking like

.ms-Dialog--large_051a9634 {
  .ms-Dialog-main {
    max-width: 90%;
  }
}

So, renaming my custom class, and not renaming the default.

[zplume]

@NickSevens I've edited my previous message with an example of how you could achieve web part scoped styles for your web part while still overriding fabric styles for that web part - would that work?

[NickSevens]

@zplume That would work indeed, but feels a bit like a work around. I'd still like to see some kind of opt-out on certain classes. I like the whole .module.scss renaming and importing :)

With your solution there's still a possibility "someone" might include another .ms-Dialog--large style, which does something I don't like - and for which I don't specify a value myself in the css (since I don't know it's going to be overwritten).
To fix this I could suffix the .ms-Dialog--large class instead of the wrapper class, but that would clutter the component code quite easily, plus provides some difficulty when writing the code if the developer has to "manually" add className="ms-Dialog--large_miniguidorsomethinglikeit". That's why the automatic renaming of the "custom" classes is such a benefit imo.

Thank you for the help though. At least I have something to work with now ;)

[patmill]

@manishgarg1 ?

[manishgarg1]

@NickSevens

• You can use the ":global" prefix in order to prevent a class from being renamed in the .module.scss file.

e.g.
:global .ms-Dialog--large {
.ms-Dialog-main {
max-width: 90%;
}
}

• You can optionally have that style in a "myStyles.scss" and module css name mangling won't happen
• You can optionally have the style in a "myStyles.css" files and SASS compiler won't come into play at all.

Please let me know if these options do not work.

But the bigger question is if you should be overriding a fabric style. We do not recommend it. We are still evaluating the use cases in order to come up with clearer guidance. But, are you not able to create a custom class that has an inner scope than the fabric style and override whatever styles you need? Did you try that? Does that not work?

[NickSevens]

@manishgarg1 The :global directive works great! Thanks for that.

As per your question about overriding the fabric style: I want to provide a Dialog which functions as a configuration window for my SPFx webpart. Currently the max-width of .ms-Dialog-main is 340px defined by:

@media (min-width: 480px)
.ms-Dialog-main {
    width: auto;
    min-width: 288px;
    max-width: 340px;
}

So in order to make the Dialog wider, it seemed to me that it was easiest to override this max-width value, by applying a ms-Dialog--large class to the Dialog instance and applying this css to it:

.ms-Dialog--large {
    :global .ms-Dialog-main {
        max-width: 90%;
    }
}

Or am I missing some other options?

Thanks for the help

[manishgarg1]

Hi @NickSevens, you are not doing anything wrong by overriding the fabric styles. But overriding fabric styles can have some unexpected consequences. Note, all the web parts load in the same window. So any other control that uses this styles will now inherit your style override. And it may look broken after this override.

Could you not add your own class to your dialog to override the style from fabric dialog? Is that proving to be a problem?

[NickSevens]

@manishgarg1 That's exactly what I'm doing with the .ms-Dialog--large class. That's also the reason I wantend .ms-Dialog--large to be renamed, but keep the .ms-Dialog-main class unrenamed. This way I end up with .ms-Dialog--large_051a9634 .ms-Dialog-main, which only overrides with that particular --large_... class on the Dialog component.

[msft-github-bot]

Issues that have been closed & had no follow-up activity for at least 7 days are automatically locked. Please refer to our wiki for more details, including how to remediate this action if you feel this was done prematurely or in error: Issue List: Our approach to locked issues