error: no mixin named focus-border office ui fabric react.Issue when referring common

Question

Requested priority: (Blocking, High, Normal, Low) : High

Describe the issue:

I have created a sharepoint react framework solution.This solution uses List Component.I now want to use the (https://github.com/OfficeDev/office-ui-fabric-react/blob/master/packages/office-ui-fabric-react/src/components/List/examples/List.Basic.Example.scss) in my solution. @import '../../../common/common';

:global { .ms-ListBasicExample-itemCell { @include focus-border();

min-height: 54px;
padding: 10px;
box-sizing: border-box;
border-bottom: 1px solid $bodyDividerColor;
display: flex;

}

.ms-ListBasicExample-itemCell:hover { background: #EEE; }

.ms-ListBasicExample-itemImage { flex-shrink: 0; }

.ms-ListBasicExample-itemContent { @include margin-left(10px); overflow: hidden; flex-grow: 1; }

.ms-ListBasicExample-itemName { @include ms-font-xl; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ms-ListBasicExample-itemIndex { font-size: $ms-font-size-s; color: $ms-color-neutralTertiary; margin-bottom: 10px; }

.ms-ListBasicExample-chevron { align-self: center; @include margin-left(10px); color: $ms-color-neutralTertiary; font-size: $ms-font-size-l; flex-shrink: 0; } } So i created a file called list.module.scss and copied the code above. But it gives an error

Any help will be appreciated.

Answer 1

The Office Fabric UI team has done a wonderful job, but they certainly didn't make the examples easy to use!

The ListBasicExample SCSS is a good example of this.

Here's how to get the example to work -- assuming that you are attempting to use the example inside of a React SPFx project:

1. Copy and paste the content of List.Basic.Example.scss into the SCSS that was created with your SCSS (e.g.: YourSolutionName.module.scss)

2. Find and remove the line that imports the common.scss

@import '../../../common/common'; #REMOVE!

3. Make sure that at the top of your SCSS, you have the following line (add it if you don't have it):

@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';

4. From the SCSS you copied and pasted, find all the @import instructions and prefix all imports with ms-. For example, @include focus-border(); will become

@include ms-focus-border();

5. At the top of your SCSS, just below the @import '~@Microsoft/sp-office-ui...' paste the following line:

$bodyDividerColor: "[theme:bodyDivider, default: #c8c8c8]";

And that should be it!

The mixins your example is looking for are already defined in the core Office Fabric UI scss -- they are just prefixed with ms-. The color that we add at the end is defined in another SCSS called _semanticSlots.scss; instead of importing the whole thing (and introduce more issues), I've just copied the definition.

I hope it helps?!