The problem is that at Salesforce they haven't integrated Lightning Components with the Lightning Design System properly yet. Fortunately, like most of the time, a work-around can be found.
My work-around is based on the assumption that they should foresee the possibility to simply switch off the standard Lightning Components styles (just like you can do in VisualForce). By inspection of the page, I found that these were in a link tag of which the Url ends on '/app.css'. When I removed this link (via the inspection tools in Firefox), I saw that the Lightning Design System style was properly rendered.
So, now the only thing to do is to automate that in the lightning app.
Assuming you are building a Lightning app, the place to incorporate that is in the highest level component, the app.
Assuming your app is called MyApp:
First, go into the helper of your app (a resource called MyAppHelper.js) and put this in it:
({
removeAppStyles : function() {
var allLinks = document.getElementsByTagName('link');
var badLink;
for (var i = 0; i < allLinks.length; i++) {
thisLinkUrl=allLinks[i].href;
var badName='/app.css';
if (thisLinkUrl.substring( thisLinkUrl.length - badName.length, thisLinkUrl.length ) === badName) badLink = allLinks[i];
}
badLink.parentNode.removeChild(badLink);
}
})
This function will simply look up a stylesheet reference of which the url ends on '/app.css' and remove it from the DOM.
Next, make sure the function is called at the right time. This is done by creating a custom renderer. Go into the renderer of the app (a resource called MyAppRenderer.js) and put this in it:
({
render : function(cmp, helper) {
helper.removeAppStyles();//work-around for the fact that the app's stylesheets are inserted while we want to use SLDS which are messed up by these std styles
var ret = this.superRender();
return ret;
},
})
This renderer will remove the app's standard stylesheet from the dom, and will then proceed with rendering the dom in the standard way by calling the renderer of the super component (which is part of the framework).
Now refresh your app and you will see proper styling.
Disclaimer: this worked for me with my small example. There may be some caveats that may turn up in more complex situations. If so, let me know!
