Lightning Component Styling is not working

Question

I have a simple lightning component for inserting records to a custom object (Show__c)

The component is working fine.

I have few issues with styling this component.

Markup

<aura:component controller="ShowClass" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >

    <aura:attribute name="AAShow" type="Show__c" default="{'sobjectType':'Show__c'}"/>

    <div class="slds-grid slds-gutters">

        <div class="slds-col slds-size_3-of-8">
        </div>

        <div class="slds-col slds-size_2-of-8">

            <lightning:input label="Name: " name="LIUI_ShowName" value="{!v.AAShow.ShowName__c}" />
            <label class="LSELabel">Rating : </label>
            <force:inputField value="{!v.AAShow.Rating__c}"/>
            <br />
            <label class="LSELabel">Genre: </label>
            <force:inputField value="{!v.AAShow.Genre__c}" />
            <br />
            <div class="cus_button">
            <lightning:buttonIcon  onclick="{!c.fLIUI_Button_Clicked}" iconName="utility:save" variant="bare" size="large" alternativeText="Save" iconClass="dark"/> 
            </div>

        </div>

        <div class="slds-col slds-size_3-of-8">
        </div>



    </div>




</aura:component>

I am trying to style this component

a) To set the background color as lightblue (WORKING)

b) To use a grid system (WORKING)

c) Labels will have to use font weight (NOT WORKING)

d) The button has to have an alignment of "margin-left:200px" (NOT WORKING)

This is my component CSS

.THIS {
    background-color: lightblue;
}

.THIS.cus_button {
    margin-left: 200px;
}

.THIS.LSELabel {
     font-weight: bold;
}

This is how my component looks in the browser.

As you can see the label and button alignment is not working.

Can someone tell me what I am missing here ?

Answer 1

The only thing I notice is the lack of spacing when you are scoping your CSS:

.THIS {
    background-color: lightblue;
}

.THIS .cus_button {
    margin-left: 200px;
}

.THIS .LSELabel {
     font-weight: bold;
}

therefore, the above css snippet should work, other than that, a few pointers.

Why dont you leverage lightning:input field instead of the force:inputField?

your component would change a bit, however, SF is pushing towards components in the lightning namespace.

<div class="slds-col slds-size_2-of-8">

    <lightning:input label="Name: " name="LIUI_ShowName" value="potato" />
    <lightning:input label="Rating" name="1" value="potato2"/>
    <br />
    <lightning:input label="Genre" name="2" value="potato3" />
    <br />
    <div class="cus_button">
    <lightning:buttonIcon  onclick="{!c.foo}" iconName="utility:save" variant="bare" size="large" alternativeText="Save" iconClass="dark"/> 
    </div>
</div>

and you would have to change your styling to the following:

.LSELabel --> .slds-form-element__label