Question

我有一个带有内联样式的 Dojo 文本框但是我想在项目的外部css文件中定义样式。我想知道可以使用哪个类来定义Dojo input =“text”元素的样式。

我尝试过使用DijitReset和DijitInputInner类，但这并不仅限于文本项。 Under是我正在使用的标签示例。

<input id="ltb" style="width: 50em;" data-dojo-type="dijit/form/TextBox" />

我对标签的内联css感到不舒服，因为我一直都知道在进行模块化开发时这是一个不好的做法（你对此也有所了解。看到这是针对 Dojo 框架的）

Answer 1

看看Dojo以及它如何进行样式

Dojo explicity saying use inline style 的原因（或许）是因为他们添加的课程充满了“重要”＆＃39;！important＆＃39; （现在我说＆＃39;他们＆＃39; - 这可能只是默认克拉拉主题中的内容）||一些道场javascript正在寻找它

.dijitInputInner {
   border: 0 !important;
   vertical-align: middle !important;
   background-color: transparent !important;
   width: 100% !important;
   padding-left: 0 !important;
   padding-right: 0 !important;
   margin-left: 0 !important;
   margin-right: 0 !important;
}

I had a play here - 并且，通过chrome中的inpsect工具，它显示实际上输入上的id保持不变，所以我们可以使用它......

#ltb { width:50em; } /* but we need to overide it */ #ltb.dijitReset, #ltb.dijitInputInner { width:5em !important; }

从trials我们可以看到，我们也将与dojo容器的CSS作斗争，它被设置为overlow:hidden等。

我不知道clara样式表使用重要内容的原因（我认为它是默认的dojo主题） - 但答案是内联样式问题是

使用内联样式（不要与dojo战斗）

或更改dojo主题文件本身

或使用!important
创建我们自己的css overides
或者我在dojo的非常有限的经历中从文档中遗漏的东西

为Dojo文本框定义CSS

1 个答案: