在 bootstrap-vue 中渲染自定义样式

Posted 2023-02-16

【中文标题】在 bootstrap-vue 中渲染自定义样式

【英文标题】：Rendering custom styles in bootstrap-vue

【发布时间】：2018-11-18 15:54:43

【问题描述】：

我正在尝试向使用 Bootstrap-Vue 的下拉菜单组件添加一些自定义样式。我正在使用文档here。

这是我的模板：

<div class="container">
  <b-dropdown id="dropdownMenuButton" text="Dropdown Button" no-caret class="custom-dropdown">
    <b-dropdown-item>First Action</b-dropdown-item>
    <b-dropdown-item>Second Action</b-dropdown-item>
    <b-dropdown-item>Third Action</b-dropdown-item>
    <b-dropdown-divider></b-dropdown-divider>
    <b-dropdown-item>Something else here...</b-dropdown-item>
    <b-dropdown-item disabled>Disabled action</b-dropdown-item>
  </b-dropdown>
</div>

我发现我可以设置#dropdownMenuButton 的样式，但是当下拉菜单在浏览器中呈现时，它会在#dropdownMenuButton 内部创建一个元素，我无法设置它的样式。我试过这样做：

<style scoped>
  #dropdownMenuButton > button 
    width: 100%;
  

  #dropdownMenuButton__BV_toggle_ 
    width: 100%;
  
</style>

但没有运气。仅供参考，创建的按钮的 ID 是dropdownMenuButton__BV_toggle_。

【问题讨论】：

也许你可以看看这个：***.com/questions/48699688/…

【参考方案1】：

这是因为您将样式设置为组件的范围，并且由于 bootstrap vue 下拉菜单是另一个组件，您将无法使用范围样式执行此操作。

https://vue-loader.vuejs.org/guide/scoped-css.html

尝试像这样删除作用域属性。

<style>
  #dropdownMenuButton > button 
    width: 100%;
  

  #dropdownMenuButton__BV_toggle_ 
    width: 100%;
  
</style>

【讨论】：

谢谢你，成功了！！此外，在选择按钮元素的两种不同方法中，是否有首选方法（父/子样式与元素的 id）？ id 没有出现在我的模板中（它是由 bootstrap-vue 创建的）所以我不愿意引用它。

【参考方案2】：

如果您不想弄乱全局样式，也可以使用 /deep/ 关键字来影响子组件：

<style scoped>
  /deep/ #dropdownMenuButton > button 
    width: 100%;
  

  /deep/ #dropdownMenuButton__BV_toggle_ 
    width: 100%;
  
</style>

【讨论】：

+1 你疯了，我花了将近 2 个小时才感到沮丧，终于 /deep/ 工作正常@randy...谢谢...