1. 목적

이번에 Lighting Desigin System 에서 제공된 표준 디자인을 바꾸려고 합니다.
기본적으로 스타일 후크를 사용하여 표준 디자인을 변경합니다. 그러나 이 방법에서는 Salesforce 측 밖에 사용할 수 없기 때문에. 사용할 때주의하시기 바랍니다.

2. 소스 구성도

lwc
 └─stylingHooksDemo

stylingHooksDemo

stylingHooksDemo.css

.my-css {
    --sds-c-button-brand-color-background: #BB00FF;
    --sds-c-button-brand-color-background-hover: #8700B8;
    --sds-c-button-brand-color-border: #BB00FF;
    --sds-c-button-brand-color-border-hover: #8700B8;
  }

stylingHooksDemo.html

<template>
    <div class="slds-card">
        <button class="slds-button slds-button_brand slds-m-bottom_medium">Normal Button</button>
        <button class="slds-button slds-button_brand slds-m-bottom_medium my-css">Styled Button</button>
    </div>
</template>

stylingHooksDemo.js

import { LightningElement } from 'lwc';

export default class StylingHooksDemo extends LightningElement {}

stylingHooksDemo.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>52.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__Tab</target>
    </targets>
</LightningComponentBundle>

3.Salesforce 측 동작 확인

Salesforce 측 Lightning 구성 요소 탭 만들기

탭 열기

왼쪽은 표준 버튼 디자인, 오른쪽은 사용자 정의 디자인

4. 참고

Lighting Design System Styling Hooks
htps //w w.ぃghtニンg로 しgnsys m. 코 m / p t t rms / ぃ ght n g / st ぃ g-hoo ks / #