How to add css to override existing styling in lightning component

Question

I am using an existing lightning component that displays some checkboxes. I am wondering if there is a way to reduce the size of the checkboxes.

<design:component >

   <design:attribute name="childCheckbox1_label" label="Label Checkbox 1 "/>
   <design:attribute name="childCheckbox1_storage" label="Checkbox 1 Output 
   Value"/>
   <design:attribute name="childCheckbox1_defaultValue" label="Checkbox 1 
   Default Value"/>

  <design:attribute name="childCheckbox2_label" label="Label Checkbox 2 "/>
  <design:attribute name="childCheckbox2_storage" label="Checkbox 2 Output 
  Value "/>
  <design:attribute name="childCheckbox2_defaultValue" label="Checkbox 2 
  Default Value"/>


</design:component>

I checked the code using inspect element. Found out this piece of code.

slds-form-element_stacked:not([class*="slds-size"]), .slds-form_stacked .slds-form-element:not([class*="slds-size"]), .slds-form_horizontal .slds- form-element_stacked:not([class*="slds-size"])

{ width: 100%; flex-basis: 100%; }

The width above is set to 100%. I need to change the width somehow in the above code. I tried to add the following in style class but it does not work.

.THIS.slds-form-element_stacked .slds-form_stacked .slds-form_horizontal { width: 3%; flex-basis: 100%; }

Answer 1

Create a .css file associated to the Aura Component (Ctrl+Shift+4 STYLE option in the Developer Console when you opened a Lightning Aura Component) and then adjust the CSS as you please.

Refer here (in the Aura CSS Becomes Standard CSS section) to an example of how the CSS looks in an Aura component.

Sample taken from that link:

.THIS .lower-third {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    color: #FFF;
    background-color: rgba(0, 0, 0, .3);
    padding: 6px 8px;
}
.THIS .lower-third > p {
    padding: 0;
    margin: 0;
}
.THIS .truncate {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}