Как применить css к свойству тега?
Я новичок в css и хотел бы знать, можно ли применить css к свойствам тега? Например, в приведенном ниже коде я хотел бы видеть entry.count и «файлы» синим цветом.
код
render() {
return(
<div className = "AppL" id = "AppList">
{this.createApplicationList()}
</div>);
}
createApplicationList() {
var guiResult = [];
for (var key in this.state.AppName) {
var entry = this.state.AppName[key];
guiResult.push(
<Collapsible trigger = {entry.AppName + "\t" + "\t" + entry.Count + " files"} className = "AppList" transitionTime = "10">
</Collapsible>);
};
return guiResult;
}
мой scss для этого компонента
.AppList{
color: black;
border-bottom: 1px solid #00a886;
padding-top:10px;
padding-bottom:10px;
}
Невозможно использовать CSS, чтобы определить, как будет выглядеть переменная на основе вашего кода. Однако вы можете применить его к отображаемому HTML. Не могли бы вы добавить код выходного HTML? Вы можете получить это из инспектора элементов браузера.
он может, переменная будет помещена в какой-то элемент, и он может стилизовать это, также применение прямого стиля к отображаемому html является плохой практикой.
@Radu Я использовал этот пакет для складного компонента npmjs.com/package/реагировать-разборный
Так что используйте инструменты разработчика вашего браузера и узнайте, какую HTML-структуру это в конечном итоге отображает… тогда вы будете знать, какой элементы выбрать для форматирования.
благодаря. Теперь я вижу класс, в который я могу подать заявку. Но еще одно сомнение. Я добавил изображение выше, и я хотел бы добавить css к .collapsible__trigger is-closed .Collapsible__trigger is-closed{ border-bottom:10px сплошной красный; } Но это не работает. любые намеки??
в документации есть раздел под названием CSS Class String Props, предлагаю заглянуть туда
Ответы 1
.Collapsible .Collapsible__trigger {
color: blue;
}
.Collapsible выбирает все элементы с классом Collapsible. Collapsible_trigger делает то же самое для класса Collapsible__trigger. В совокупности правило выбирает все элементы .Collapsible__trigger внутри элементов .Collapsible и оформляет их синим цветом.
Это основано исключительно на предоставленном вами HTML-коде. JavaScript кажется неактуальным.
.Collapsible .Collapsible__trigger.is-closed тоже работает и конкретнее. Зависит от вашего варианта использования.
@ user28 Не забудьте принять ответ (кнопка проверки), когда кто-то ответит на ваш вопрос.
Вы можете добавить код в компонент
Collapsible?