There are several ways to handle apply custom styling to your lightning components. This link gives you an overview of these approaches.
While using the component CSS file, i ran into an issue where the custom styles were not applied to a lightning component. On further analysis, it appeared to be depending on the way the CSS class definitions are declared in the CSS file.
Below are two types of declarations of the 'custom-button' class, the first one without spaces and the second one with spaces. In some cases the first one works, whereas in other cases the second one works. I have still not figured out the reason for this behavior. To debug similar issues just add/remove the spacing and observe the behavior.
As a best practice, you might want to tie your class to the selector to be more specific. The below example ties the class 'fancify' to the html element label.
While using the component CSS file, i ran into an issue where the custom styles were not applied to a lightning component. On further analysis, it appeared to be depending on the way the CSS class definitions are declared in the CSS file.
Below are two types of declarations of the 'custom-button' class, the first one without spaces and the second one with spaces. In some cases the first one works, whereas in other cases the second one works. I have still not figured out the reason for this behavior. To debug similar issues just add/remove the spacing and observe the behavior.
As a best practice, you might want to tie your class to the selector to be more specific. The below example ties the class 'fancify' to the html element label.
