更改DOJO小部件的默认样式

发布时间：2020-12-16 21:19:07 所属栏目：百科来源：网络整理

导读：我希望能够更改一些默认的CSS样式,例如,dijit.TitlePane,而不会破坏“工厂安装的”css主题.我要做的是删除TitlePane的Title和ContentOuter边框.在声明窗口小部件时设置一个类(在本例中为“borderless”)不起作用(见下文：我也尝试在data-dojo-props中设置类.

我希望能够更改一些默认的CSS样式,例如,dijit.TitlePane,而不会破坏“工厂安装的”css主题.我要做的是删除TitlePane的Title和ContentOuter边框.在声明窗口小部件时设置一个类(在本例中为“borderless”)不起作用(见下文：我也尝试在data-dojo-props中设置类.仍然没有去).

<div class="borderless" data-dojo-type="dijit.TitlePane" data-dojo-  props="title:'Filter by Last Name'" open="false">

以下是我想在claro.css文件中更改的类.当然,我可以改变那里的边界,但我不想出于明显的原因走这条路.我想做的就是在我自己的班级中覆盖这些设置.这应该很容易,但我只是在抽筋.有帮助吗？ (使用DOJO 1.7.1).

谢谢

.claro .dijitTitlePaneTitle {
background-color: #EFEFEF;
background-image: url("images/titlebar.png");
background-repeat: repeat-x;
border: 1px solid #B5BCC7;
min-height: 17px;
padding: 0 7px 3px;
}

.claro .dijitTitlePaneContentOuter {
-moz-border-bottom-colors: none;
-moz-border-image: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background: none repeat scroll 0 0 #FFFFFF;
border-color: -moz-use-text-color #B5BCC7 #B5BCC7;
border-width: medium 1px 1px;
}

解决方法

您应该能够通过创建更具体的选择器来覆盖样式.

这应该工作.在你的body元素中,添加另一个类,比如

<body class='claro myCompany'>

那么你可以定义自己的风格：

.claro.myCompany .dijitTitlePaneContentOuter {
-moz-border-bottom-colors: none;
-moz-border-image: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background: none repeat scroll 0 0 #FFFFFF;
border-color: -moz-use-text-color #B5BCC7 #B5BCC7;
border-width: medium 1px 1px;
}

基于dom树路径的任何更具体的东西也会起作用

<body class='claro'>
  <div class='fooClass'>
    <your title pane here>

然后在你的选择器中：

.claro.myCompany .fooClass .dijitTitlePaneContentOuter {
  /* my special css */

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!