Dojo Dijit样式问题

Question

I'm trying to use a dijit/layout/TabContainer with a modified dijit theme. 我正在尝试使用具有修改过的dijit主题的dijit/layout/TabContainer 。 I need to modify some of the styling of the TabContainer tabs such as the padding of the tabs, boldness, etc. However the styling commands specific to the pages that use the TabContainer are not working. 我需要修改TabContainer选项卡的某些样式，例如选项卡的填充，粗体等。但是，特定于使用TabContainer的页面的样式命令不起作用。

This piece of code is on my home page's CSS file. 这段代码在我主页的CSS文件中。

.myTheme .homeTabContent
{
    font-weight: bold !important;
}

.myTheme .homeTabContent .dijitTab /* The .dijitTab is the original CSS class of the tab*/
{
    font-weight: bold !important;
    padding-left: 3px !important;
    padding-right: 3px !important;
}

The tabs' padding and font-weight remain unchanged despite the !important . 尽管!important ，选项卡的填充和字体粗细仍保持不变。 Editing the TabContainer CSS file in myTheme isn't a practical solution because I that will just mess up the styling of a different page. 在myTheme编辑TabContainer CSS文件不是一个实际的解决方案，因为我只会弄乱另一个页面的样式。 What happens is that as I load the page with the styling, my commands appear to be working for a split second, however all of that is undone when the TabContainer finishes loading. 发生的情况是，当我使用样式加载页面时，我的命令似乎在TabContainer ，但是当TabContainer完成加载时，所有这些操作都将被撤消。 Can anyone tell me why or offer me a solution? 谁能告诉我原因或提供解决方案？ Thanks in advance! 提前致谢！

Answer 1

Here is a working solution. 这是一个可行的解决方案。 http://jsfiddle.net/oamiamgod/rd58M/ http://jsfiddle.net/oamiamgod/rd58M/

I have included class myTheme to body tag. 我已将myTheme类包含在body标签中。 Like this 像这样

<body class="claro myTheme">

I'm not good at english but I will try to explain. 我英语不好，但我会尽力解释。

If you write css like this .myTheme .homeTabContent .dijitTab that mean an element of class homeTabContent have to stay inside some element that has class myTheme 如果你写的CSS这样.myTheme .homeTabContent .dijitTab意味着类的元素homeTabContent必须保持有类的一些元素中myTheme

Like this 像这样

<body class="claro myTheme">
    <div class="homeTabContent">
        <div class="dijitTab"></div>
    </div>
</body>

But if you write css like this .myTheme.homeTabContent.dijitTab (with no space) it will be 但是，如果您像这样编写css .myTheme.homeTabContent.dijitTab （没有空格），它将是

<div class="myTheme homeTabContent dijitTab"></div>

Dojo Dijit样式问题

问题描述

1 个解决方案

解决方案1
1 2012-12-07 07:36:50

Dojo Dijit样式问题

问题描述

1 个解决方案

解决方案1 1 2012-12-07 07:36:50

解决方案1
1 2012-12-07 07:36:50