覆盖特定 Bootstrapvue 组件的 CSS

发布于 2025-01-14 00:20:09 字数 1088 浏览 1 评论 0 原文

这里是第一个问题，如果我做错了，请教育我。

所以我正在开发一个使用 BootsrapVue 的 SPA，我创建了一个视图，该视图

<b-form-checkbox-group
                v-model="anything"
                :options="options"
                :disabled="ifDisabled"
                button-variant="outline-secondary"
                buttons
              >

在渲染时使用 a ，我得到这个 html：

<fieldset data-v-3bacc3f3 class="form-group" id="__BVID__38">
  <legend tabindex=-1" class="bv-no-focus-ring col-form-label pt-0" id="__BVID__38__label_">Selector</legend>
  <div>
    <div> data-v-3baac3f3 role="group" tabindex="-1" class="btn-group-toggle btn-group bv-no-focus-ring" id="__BVID__39">
      <label class="btn btn-outline-secondary disabled atcive">
        <input type="checkbox" name="buttons-1" disabled="disabled" class value="100" id="__BVID__39_BV_option_0">
        <span>100</span>
...

现在我已经尝试了很多东西，但无法弄清楚如何覆盖选项的 scss 样式。最好只在这个范围内，但我什至无法在全球范围内做到这一点。

我什至无法找出应该在哪里更改 :hover 和 :focus 的 css 的正确位置。

请帮忙！

原文

first Question here so please educate me if i'm doing this wrong.

So im working on an SPA that uses BootsrapVue and i created a view that uses a

<b-form-checkbox-group
                v-model="anything"
                :options="options"
                :disabled="ifDisabled"
                button-variant="outline-secondary"
                buttons
              >

when this gets rendered i get this html:

<fieldset data-v-3bacc3f3 class="form-group" id="__BVID__38">
  <legend tabindex=-1" class="bv-no-focus-ring col-form-label pt-0" id="__BVID__38__label_">Selector</legend>
  <div>
    <div> data-v-3baac3f3 role="group" tabindex="-1" class="btn-group-toggle btn-group bv-no-focus-ring" id="__BVID__39">
      <label class="btn btn-outline-secondary disabled atcive">
        <input type="checkbox" name="buttons-1" disabled="disabled" class value="100" id="__BVID__39_BV_option_0">
        <span>100</span>
...

now i've tried alot of stuff but cant figure out how i am able to override the scss styles for the options. Preferably only in this scope, but i cant even manage to do it globaly.

I'm even having trouble figuring out the right place where i should be looking to change css for :hover and :focus.

please help!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

一念一轮回 2025-01-21 00:20:09

这是有效的：

<style lang="scss">
.btn-group-toggle:not(#_) label {
  /* general styles */
  &.disabled {
  }
  &.focus {
  }
  &.active {
  }
  &:hover {
  }
}
</style>

将 scoped 属性添加到

为了避免此类问题，我使用 Vue Loader 的文档：我为 bootstrap-vue 内部创建了一个单独的

工作演示。

This works:

<style lang="scss">
.btn-group-toggle:not(#_) label {
  /* general styles */
  &.disabled {
  }
  &.focus {
  }
  &.active {
  }
  &:hover {
  }
}
</style>

When adding scoped attribute to the <style> tag, you're largely at the hand of your installed pre-processor which might or might not be able to parse >>>, /deep/, ::v-deep or :deep(), depending on version.

To stay away from such issues, I use the suggestion made in Vue Loader's docs: I create a separate <style> tag for bootstrap-vue internals, without the scoped attribute and keep the rest of component style rules in a <style scoped>.

Working demo.

回复收藏 0 原文

~没有更多了~