У меня есть код для ввода текста

 <lightning-input label="Email" class="textInput" value={rec.Name} onchange={handleNameChange}></lightning-input>

Здесь я хочу изменить цвет этикетки. Я пробовал это так. Но не работает.

.textInput {
    color: black;
    font-weight: bold;
 }

Когда я вижу элемент проверки, он выглядит так: введите здесь описание изображения

Как мне написать css?

1
Thirumagal 21 Янв 2020 в 14:27

6 ответов

Если предположить, что вы говорите о LWC, а не об Aura (поскольку вы ссылаетесь на «lightning-input», а не на «lightning:input»), LWC специально запрещает родителю вмешиваться в представление дочернего компонента с помощью Shadow DOM.

Согласно документации Lightning-input, не существует Открытый означает применение стиля, который вы хотите применить. Единственный способ применить любую форму стиля — использовать атрибут «вариант».

5
Phil W 21 Янв 2020 в 14:09
Когда я добавляю цвет через элемент проверки, он работает. И вот он под .slds-scope .slds-form-element__label {
 – 
Thirumagal
21 Янв 2020 в 14:19
Я обновил вопрос с изображением
 – 
Thirumagal
21 Янв 2020 в 14:27
2
Использование инспектора работает, потому что вы получаете прямой доступ к теневому содержимому DOM. Вы не можете сделать это программно в рамках LWC. Смотрите мой ответ.
 – 
Phil W
21 Янв 2020 в 14:51

Попробуйте это в файле CSS

.textInput{
     -webkit-text-fill-color: black;
}

У меня это сработало !!

1
Rahul Gawale 19 Авг 2020 в 11:12
+1 Здесь это работает, но не для всех пользователей, так как еще не стандартизировано, ссылка
 – 
Rahul Gawale
19 Авг 2020 в 11:16

Обновите файл CSS как:

.THIS .textInput{
    color: Black;
    font-weight: bold;
}

Кроме того, введите текст как <lightning:input label="Email" class="textInput" value={!rec.Name} onchange={!c.handleNameChange}></lightning:input>

0
Rashmi S 21 Янв 2020 в 14:04
Учитывая использование «молниеносного ввода», я бы предположил, что это в контексте LWC, а не Aura, и в этом случае предложенный вами подход не сработает.
 – 
Phil W
21 Янв 2020 в 14:05
Привет, Рашми, да, я работаю над LWC.
 – 
Thirumagal
21 Янв 2020 в 14:08
<p class="l-text"> Email </P><lightning-input variant="label-hidden"value={rec.Name} onchange={handleNameChange}></lightning-input>

.l-текст{ цвет: синий; }

Попробуй это.

0
Asif Jamal 6 Июл 2020 в 11:10
Это не работает.
 – 
Rahul Gawale
19 Авг 2020 в 11:17

Вам просто нужно установить вариант, чтобы он попадал в метку по умолчанию.

<lightning-input id="input-FirstName" type="text" variant="label-hidden"></lightning-input>

Вы можете добавить метку, используя html *Имя

0
Henrique Cabral 29 Окт 2020 в 21:50

Попробуй это lightning-input style="-webkit-text-fill-color:black"

-1
Oleksandr Berehovskyi 3 Ноя 2021 в 12:34
1
Это дубликат существующего ответа, но с меньшим количеством информации.
 – 
Derek F
3 Ноя 2021 в 14:19