Applying Multiple CSS Classes in SharePoint Framework
If you need to apply multiple CSS classes in your SPFx code, you can do that with
css utility function from the Office UI Fabric. Here’s an example of how to use the
css function and two alternative approaches.
For a demo scenario we’ll apply
.hidden CSS classes to a
<div>. The last class,
.hidden, should be applied if a web part property
isVisible equals to
css function is a recommended approach, I encourage you to review all the approaches to be aware of them and their applicability.
Styles for SharePoint Framework web parts are defined in
scss files. You can access these styles in your code with the
In the example above
styles.container will return a string with a corresponding CSS class (like
container_6e6e1386, where suffix will be different with every CSS change).
For our demo scenario mentioned above classes would be available as
Approach 1 (easy but cumbersome): Using strings concatenation
The easiest way to combine multiple CSS classes is by using strings concatenation. This can be done as the following:
This approach works fine if you’ve got a small amount of classes and simple conditions. With more classes and more complex conditions, it’s getting harder to read.
Here is a slightly more complex version that is harder to read:
Note: you can use
Array.join() function to concatenate strings:
It is easier to read comparing to strings concatenation, but
css utility function provides better functionality (more types of arguments supported).
Approach 2 (optimal): Using
Office UI Fabric provides a utility
css function that combines multiple CSS classes together.
Here’s an example (note the import of
css function at the top and usage of the funtion to build a string with CSS classes):
In addition to string parameters,
css function also accepts objects that implement
toString() function and dictionaries.
Here are some additional examples:
With ES6 syntax you can build complex assignmets by creating an object with conditional styles and passing it to
css function as an argument:
Note: If you’ve worked with React, chances are that you are familiar with
classnames npm package that works in a very similar way to
css function. You can use your experience and apply the same approaches to
css funtion as with
Approach 3 (advanced): Using Styleable Components from Office UI Fabric
The last approach is applicable if you want to implement reusable components with dynamic styling. This is useful if you want to allow parent components to provide styles for your component or allow other developers to do that in code. Thus it is mostly applicable to separate React components, rather than whole web parts.
This approach is used by Office UI Fabric components and is described in the Component Styling guide. It uses CSS-in-JS approach, where you define your component’s styles not in
.scss file but as a TypeScript object. This allows to create an object that defines multiple CSS styles that can be later applied to a component during rendering. This object can be passed to a component by a parent that improves styling flexibility.
Here’s an example:
In the example above I define styles that should be applied to a
<div> with a
containerStyles variable. It contains both CSS class names and dynamic styles.
I would like you to be aware of this approach, but we’re not going into details in this post. Check Office UI Fabric documentation if you’re interested in learning more.