如何将css应用于标签的属性？答案

【问题标题】：How to apply css to the property of the tag?如何将css应用于标签的属性？
【发布时间】：2019-01-25 12:26:41
【问题描述】：

我是 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;
}

【问题讨论】：

可以将代码添加到Collapsible 组件中吗？
不可能使用 CSS 来根据您的代码确定变量的外观。但是，您可以将其应用于呈现的 HTML。您可以添加输出 HTML 的代码吗？您可以从浏览器的元素检查器中获取此信息。
他可以，变量将被放入某种元素中，他可以设置样式，同时将直接样式应用于呈现的 html 是一种不好的做法
@Radu 我将此包用于可折叠组件npmjs.com/package/react-collapsible
所以使用您的浏览器开发工具并找出最终呈现的 HTML 结构......然后您就会知道要格式化的目标是哪些元素。

标签： css reactjs stylesheet scss-lint

【解决方案1】：

.Collapsible .Collapsible__trigger {
  color: blue;
}

.Collapsible 选择具有Collapsible 类的所有元素。 Collapsible_trigger 对 Collapsible__trigger 类执行相同的操作。该规则一起选择 .Collapsible 元素中的所有 .Collapsible__trigger 元素，并使用蓝色文本设置它们的样式。

这完全基于您提供的 HTML 代码。 JavaScript 似乎无关紧要。

.Collapsible .Collapsible__trigger.is-closed 也有效并且更具体。取决于您的用例。

【讨论】：

@user28 当有人回答您的问题时，不要忘记接受答案（检查按钮）。