为什么 CSS 样式不能应用于 Buefy 创建的元素？

Question

我正在尝试更改由 Buefy 生成的 table row 的 background-color。

我不明白为什么我无法更改 table 行的颜色，但我可以更改其子项的颜色。

我尝试了两种方法，设置整个 class 名称或仅设置我想要的元素的 class 名称：

.table.is-hoverable tbody tr.detail:not(.is-selected):hover {
    background-color: rgb(218, 11, 11) !important;
}

.detail {
    background-color: rgb(218, 11, 11) !important;
}

例如，我可以更改内部元素的颜色：

.media {
  background-color: yellow !important;
}

完整代码

<template>
  <section class="hero">
    <div class="hero-body">
      <div class="container">
        <b-table
          :data="downloads"
          ref="table"
          :loading="isLoading"
          hoverable
          detailed
          detail-key="version"
          selectable
          @select="toggle"
        >
          <template slot-scope="props">
            <b-table-column
              class="is-unselectable"
              cell-class="has-pointer-cursor"
              field="version"
              label="Version"
              width="70"
            >
              <span class="tag is-info">{{ props.row.version }}</span>
            </b-table-column>

            <b-table-column
              class="is-unselectable"
              cell-class="has-pointer-cursor"
              field="download_count"
              label="Download Count"
              sortable
              numeric
            >{{ props.row.download_count.toLocaleString() }}</b-table-column>

            <b-table-column
              class="is-unselectable"
              cell-class="has-pointer-cursor"
              field="release_date"
              label="Release Date"
              sortable
              centered
            >{{props.row.release_date ? new Date(props.row.release_date).toLocaleDateString() : "unknown"}}</b-table-column>
          </template>

          <template slot="empty">
            <section v-if="!isLoading" class="section">
              <div class="content has-text-grey has-text-centered">
                <p>Looks like it was not possible to load the data.</p>
              </div>
            </section>
          </template>

          <template slot="detail" slot-scope="props">
            <article class="media">
              <div class="media-content">Some text.
                <hr>Some other text.
              </div>
            </article>
          </template>

          <template slot="footer">
            <div v-if="!isLoading" class="has-text-right">This is a footer.</div>
          </template>
        </b-table>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  name: "HelloWorld",

  data() {
    return {
      downloads: [],
      isLoading: true
    };
  },

  mounted() {
    this.downloads = [
      { version: "1.5", download_count: 500, release_date: new Date() },
      { version: "1.4", download_count: 400, release_date: new Date() },
      { version: "1.3", download_count: 300, release_date: new Date() },
      { version: "1.2", download_count: 200, release_date: new Date() },
      { version: "1.1", download_count: 100, release_date: new Date() }
    ];

    this.isLoading = false;
  },

  methods: {
    toggle(row) {
      this.$refs.table.toggleDetails(row);
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}

//This is how I expect it should work.
.table.is-hoverable tbody tr.detail:not(.is-selected):hover {
  background-color: rgb(218, 11, 11) !important;
}

//Applying the property to the
.detail {
  background-color: rgb(218, 11, 11) !important;
}

.media {
  background-color: yellow !important;
}
</style>

复制link： https://codesandbox.io/s/misty-sea-bmyvc?file=/src/components/HelloWorld.vue

Answer 1

您的 CSS 已确定范围。最后，那些类与 [data-xxx] 选择器相关联，因此它们仅应用于此组件。

.detail[data-xxx] 不会覆盖库的 CSS，您只需要 .detail

所以把这个CSS代码放到一个单独的简单<style lang="scss">中，让你的组件自己的CSS在<style lang="scss" scoped>

为什么 CSS 样式不能应用于 Buefy 创建的元素？

Why CSS styles can't be applied to elements created by Buefy?

css

vue.js

buefy

完整代码