Я хотел бы использовать атрибут для установки цвета фона в моем компоненте Lightning. Я попытался применить решение в сообщении ниже, но не смог адаптировать его для своего компонента. Выражения в файле CSS?

Ниже мой компонент и CSS, где мы в настоящее время устанавливаем цвет фона статически.

Компонент

    <aura:component implements="forceCommunity:availableForAllPageTypes,force:appHostable" access="global" >
    
    <aura:attribute name="URL" type="String" default="" />
    <aura:attribute name="Title" type="String" default="" />
    <aura:attribute name="Image" type="String" default="" />
    <aura:attribute name="Description" type="String" default="" />
    
    
    <div class="c-container1" id="main-content">
        <lightning:layout multipleRows="true" horizontalAlign="space">
            <lightning:layoutItem flexibility="auto" padding="around-small" size="3"  class="box-1">
                <div class="card-contains">
                    <a href="{!v.URL}" class="">
                        <div>
                            <div class="results__name">
                                <center>
                                    <div class="headingMain">
                                        <h3 class="heading">{!v.Title}</h3><br />
                                    </div>
                                    <div class="results__logo">
                                        <center>
                                            <img class="elemLogo1" src="{!$Resource.KimbleImages + '/eleImg.2/'+v.Image}" />
                                        </center>
                                    </div>
                                    <div class="headingDetailMain">
                                        <p class="headingDetail">{!v.Description}</p>
                                    </div>
                                </center>
                            </div>
                        </div>
                    </a><br/>
                </div>
            </lightning:layoutItem>
        </lightning:layout>
    </div>
</aura:component>

CSS

    .THIS a{
    text-decoration:none !important;
}
.THIS .box-1{
    Background-color:#FFFFFF;
    border-radius: 1 px;
    width: 450px;
    height: 100%;
    border-style: none;
    border-radius: 10px;
   
}
.THIS .headingMain{
   overflow: hidden;
   height: 40px;
}
.THIS .headingDetailMain{
   overflow: hidden;
   height: 60px;
}
0
Jeff Callahan 3 Сен 2021 в 04:31
2
Где вы пытаетесь установить цвет? Я не вижу здесь CSS или JavaScript, чтобы объяснить всю ситуацию.
 – 
sfdcfox
3 Сен 2021 в 03:15
Пожалуйста, обновите свой пост вместо того, чтобы публиковать это в разделе комментариев
 – 
glls
3 Сен 2021 в 03:52

2 ответа

Лучший ответ

Вы можете определить всю комбинацию css в своем файле css, а затем динамически передать имя класса со стороны вашего сервера.

<aura:component description="StackTest" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,
    force:hasRecordId,lightning:actionOverride,lightning:isUrlAddressable" access="global">

    <aura:attribute name="URL" type="String" default="https://www.google.com"/>
    <aura:attribute name="Title" type="String" default="Test Me"/>
    <aura:attribute name="Image" type="String" default=""/>
    <aura:attribute name="Description" type="String" default="Test Desc"/>
    <aura:attribute name="BackgroundCSS" type="String" default="box-1"/>


    <div class="c-container1" id="main-content">
        <lightning:layout multipleRows="true" horizontalAlign="space">
            <lightning:layoutItem flexibility="auto" padding="around-small" size="3" class="{!v.BackgroundCSS}">
                <div class="card-contains">
                    <a href="{!v.URL}" class="">
                        <div>
                            <div class="results__name">
                                <center>
                                    <div class="headingMain">
                                        <h3 class="heading">{!v.Title}</h3><br/>
                                    </div>
                                    <div class="results__logo">
                                        <center>
                                            <!--<img class="elemLogo1" src="{!$Resource.KimbleImages + '/eleImg.2/'+v.Image}" />-->
                                        </center>
                                    </div>
                                    <div class="headingDetailMain">
                                        <p class="headingDetail">{!v.Description}</p>
                                    </div>
                                </center>
                            </div>
                        </div>
                    </a><br/>
                </div>
            </lightning:layoutItem>
        </lightning:layout>
    </div>

    <div>
        <lightning:button type="button" value="Change Color" onclick="{!c.changeColor}">Change Color</lightning:button>
    </div>
</aura:component>

Контроллер:

({
    changeColor: function (component, event, helper) {
       component.set('v.BackgroundCSS', 'box-2')
    },
});

Css:

.THIS a{
    text-decoration:none !important;
}
.THIS .box-1{
    Background-color: #3a4834;
    width: 450px;
    height: 100%;
    border-style: none;
    border-radius: 10px;

}

.THIS .box-2{
    Background-color: #8f918e;
    width: 450px;
    height: 100%;
    border-style: none;
    border-radius: 10px;
}

.THIS .headingMain{
    overflow: hidden;
    height: 40px;
}
.THIS .headingDetailMain{
    overflow: hidden;
    height: 60px;
}

enter image description here

1
Nagendra Singh 3 Сен 2021 в 05:26

Я смог понять это, определив стиль в div в строке 14. Также в строках 19 и 27 я добавил стиль для установки цвета шрифта. Затем мне нужно было удалить эти определения из моего CSS

    <aura:component implements="forceCommunity:availableForAllPageTypes,force:appHostable" access="global" >
    
    <aura:attribute name="URL" type="String" default="" />
    <aura:attribute name="Title" type="String" default="" />
    <aura:attribute name="Image" type="String" default="" />
    <aura:attribute name="Description" type="String" default="" />
    <aura:attribute name="bgColor" type="String" default="#FFFFFF" />
    <aura:attribute name="textColor" type="String" default="#FFFFFF" />
    
    <div class="c-container1" id="main-content">
        <lightning:layout multipleRows="true" horizontalAlign="space">
            
            <lightning:layoutItem flexibility="auto" padding="around-small" size="3"  class="box-1" >
                <div class="card-contains" style="{! 'background-color:' + v.bgColor }">
                    <a href="{!v.URL}" class="">
                        <div>
                            <div class="results__name">
                                <center>
                                    <div class="headingMain" style="{! 'color:' + v.textColor }">
                                        <h3 class="heading">{!v.Title} </h3><br />
                                    </div>
                                    <div class="results__logo">
                                        <center>
                                            <img class="elemLogo1" src="{!$Resource.KimbleImages + '/eleImg.2/'+v.Image}" />
                                        </center>
                                    </div>
                                    <div class="headingDetailMain" style="{! 'color:' + v.textColor }">
                                        <p class="headingDetail">{!v.Description}</p>
                                    </div>
                                </center>
                            </div>
                        </div>
                    </a><br/>
                </div>
            </lightning:layoutItem>
        </lightning:layout>
    </div>
</aura:component>
0
Jeff Callahan 3 Сен 2021 в 20:02