How to add custom CSS when building SPFx web part

[imbourg]

Currently I add my custom CSS style to the NameWebPart.module.scss but when generated Sharepoint appends a random suffix to the class I created. For example a class .circle could render as .circle_3c48f1c2.

I assign CSS class to nodes programmatically. However this suffix makes it impossible to get my design to render correctly.

Any solution to having my own custom css without the _suffix ?

Or at least a way to predict the css class that will be generated in Javascript?

[#2 · Accepted solution]

Hi @imbourg

The prefix is a good thing and ensures that the CSS on your solution will never override any existing CSS class on the page.

I don't now if I understood your question correctly, but my impression is that you are having problems using your CSS on your own HTML elements.

If this is the case (apologies if not), you can use the styles typed object that is imported at the top of your components as it contains a reference to your CSS classes and is resolved into the correct  class name + suffix when you build your solution.

Example for a react component:

<div className="{styles.myCSSClassName}"></div>

If you still want to generate global styles (I would not recommend unless you have a valid reason), you can prefix your CSS classes with :global

Example:

:global .myGlobalClassName {

  display: block;

}

This will generate a class without the suffix at the end.

You can get some useful recommendations here

Hope it helps

[#3]

Thanks Joel for this. It can guide me in the right direction...

However I can be more explicit about what I wanted to do:

I load items from a SP List (REST): depending on the value of a field called status, I apply different style via CSS classes to the rendering of the item. And there are many statuses. 

So I created a javascript object that matches the status value with corresponding CSS class called _statusstyle

Now when it comes to generate the HTML, I do the following (in a loop over the list item).

<div class="${ styles.listItem } ${ _statusstyle[status]}">

This will automatically apply the corresponding CSS class to the div e.g. pending but the problem is that SP will generate something like pending_3c48f1c2.

Do you see the dilemma now? Is there a way to do something like ${ styles._statusstyle[status]}

An alternative will be using if or switch statement but it will be too long...

[#4]

Hi,

Yes, I can see the problem now.

I think it's just down to how the _statusstyle object is created.

Can you try something like this? Hopefully the generated class name for pending is correct

_statusstyle= {

pending: styles.pending

}

Or perhaps try to access the class directly from the styles object, assuming that the class names are the same

<div class="${ styles.listItem } ${ styles[status]}">

I'm just trying to think about options, but haven't tested it so sorry if it doesn't work

[#5]

Just tried your 2 options without luck.

The first one generates the class as: styles.pending ...

With the style object, I have undefined

I think I will just use the global keyword ...

[#6]

Another option perhaps is you can create a function with a switch/case that returns the correct CSS class based on the status value. That way you still remove the logic from the rendering function