Salesforce1 and Lightning Experience unexpected styling or UI behavior after opening a Lightning Component tab
|Knowledge Article Number||000231069|
|Description||If your Lightning Component uses an external CSS resource there is a possibility that the custom CSS will affect the styling and behavior of other areas of Salesforce1 and Lightning Experience. Users may notice text aligned incorrectly, font that is larger or smaller than usual, buttons that no longer work as expected, or other unexpected behavior.|
|Resolution||Styling Components for Salesforce1 and Lightning Experience
To prevent styling conflicts in Salesforce1 and Lightning Experience, prefix your external CSS with a unique namespace. For example, if you prefix your external CSS declarations with .myBootstrap, wrap your component markup with <div> tag that specifies the myBootstrap class.
<ltng:require styles="/resource/bootstrap"/> <div class="myBootstrap"> <c:myComponent /> <!-- Other component markup --> </div>
Note: Prefixing your CSS with a unique namespace only applies to external CSS. If you're using CSS within a component bundle, the .THIS keyword becomes .namespaceComponentName during runtime. For further information please refer to the Lightning Components Developer's Guide.