Forum Discussion
How to add custom CSS when building SPFx web part
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
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
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...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
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 ...
