ui:inputCheckbox and lightning design system

Question

I'm trying to apply styles for checkboxes from Lightning Design System in my custom Lightning component. I would like to use <ui:inputCheckbox> standard lightning component, but looks like not all standard Lightning components compatible with Lightning Design System.

In the SLDS doc there is a statement regarding checkboxes:

The ability to style checkboxes with CSS varies across browsers. To ensure that checkboxes look the same everywhere, we use a custom DOM. Pay close attention to the markup, because all elements must exist for the styles to work.

And the example from doc looks like this:

<label class="slds-checkbox" for="checkboxSample1">
    <input name="checkbox" type="checkbox" id="checkboxSample1" />
    <span class="slds-checkbox--faux"></span>
    <span class="slds-form-element__label">Checkbox Label</span>
  </label>

But <ui:inputCheckbox> tag generates following html code:

<div class="uiInput uiInputCheckbox">
  <label class="uiLabel-left uiLabel">
    <span>Reimbursed?</span>
  </label>
  <input type="checkbox" class="uiInput uiInputCheckbox">
</div>

So my question - Is it possible to use standard lightning checkbox component and style it with SLDS styles?

Answer 1

Possible work-around is to remove the style sheet dynamically in the rendering of the app.

This solution is described in the answer of Lightning Design System is overridden by styles from app.css

Let me know if it worked!