Я пытаюсь раскрасить стрелки утилиты «вверх» и «вниз», которые предоставляет SLDS. Я подтвердил, что мой селектор CSS правильно выбирает значок SVG в консоли браузера $$('.down svg'), но заливка не применяется к svg.

Есть предположения? Есть ли что-то особенное, что мне нужно сделать?

Благодарность

#LWC component
<lightning-icon class="down" icon-name="utility:down" size="x-small"></lightning-icon>

#CSS
.up svg {
    fill : green;

}

.down svg {
    fill : red;
}
3
Jay 31 Май 2019 в 21:54

2 ответа

Лучший ответ

Вы не можете повлиять на внутренние части компонента из-за изоляции CSS. Вы можете изменить фон, границу и т. д. значка молнии, но вы не можете повлиять на стрелку внутри, за исключением любых поддерживаемых вариантов. См. этот пример:

<template>
    <div class="row">
        <h1>Up Arrow</h1>
        <lightning-icon class="green-background" icon-name="utility:up" alternative-text="Up arrow" variant="inverse" size="small"></lightning-icon>
    </div>
    <div class="row">
        <h1>Down Arrow</h1>
        <lightning-icon class="red-background" icon-name="utility:down" alternative-text="Down arrow" variant="inverse" size="small"></lightning-icon>
    </div>
</template>

.row{
    margin:10px 0 10px;
}
.green-background {
    background: green;
}
.red-background {
    background: red;
}
5
sfdcfox 31 Май 2019 в 22:04
Спасибо sfdcfox - я разобрался с вашим примером. Я столкнулся с альтернативным маршрутом, который сказал мне загрузить пользовательский .css в статические ресурсы и использовать loadStyle из модуля platformResourceLoader, который работал для меня. Вы не знаете, планируют ли они решить эту проблему? Если нет, и это сделано намеренно, есть ли раздел в руководстве LWC, к которому вы можете отослать меня, в котором больше говорится об этой «изоляции»?
 – 
Jay
31 Май 2019 в 23:04
Это не должно работать, если родитель загружает CSS, звучит как ошибка. См. раздел Shadow DOM "определены стили CSS в родительском компоненте не проникают в дочерний. В нашем примере стиль ap, определенный в таблице стилей todoApp.css, не стилизует элемент p в компоненте c-todo-item, потому что стили не распространяются на теневое дерево." Также см. соответствующие документы оттуда.
 – 
sfdcfox
31 Май 2019 в 23:11
Это интересно @sfdcfox - я взял тот же CSS и загрузил его как статический ресурс, а затем просто добавил следующее в свой компонент, и он работает. renderedCallback() { Promise.all([ loadStyle(this, css + '/'), ]) }
 – 
Jay
31 Май 2019 в 23:18
Кроме того, где вы это нашли? Я хотел бы взглянуть на это и, возможно, проверить с несколькими людьми, чтобы узнать, предназначен ли он для поддержки таким образом. Насколько я понимаю, изоляция должна предотвратить это.
 – 
sfdcfox
31 Май 2019 в 23:19
Обратитесь к ответу "pdebaty" на этот пост, это то, что натолкнуло меня на идею попробовать - salesforce.stackexchange.com/questions/246887/…
 – 
Jay
31 Май 2019 в 23:24

Чтобы изменить цвет значка утилиты, если обнаружено следующее.

CSS

 .menu-icon {
    --lwc-colorTextIconDefault: white;
  }

HTML

<lightning-icon
        icon-name="utility:connected_apps"
        alternative-text="Connected"
        title="Connected"
        class="menu-icon"
      >
      </lightning-icon>
0
Kennedy Nyaga 19 Мар 2021 в 04:12