DevExtreme 覆盖 dxButton 的 css答案

【问题标题】：DevExtreme override css of dxButtonDevExtreme 覆盖 dxButton 的 css
【发布时间】：2017-06-21 07:43:23
【问题描述】：

我有以下 dxButton 元素。

<div class="dx-field-value" data-bind="dxButton: { text: name, onClick: $root.name }"></div>

按钮的文本是通过变量name 分配的。现在，我希望按钮文本始终为 uppercase 对于这个特定元素。

我尝试为它设置一个 id 和一个类，并创建自定义 css，但它不起作用。我也尝试过如下内联样式：

<div class="dx-field-value" style="text-transform: uppercase;" data-bind="dxButton: { text: 'Text' }"></div>

【问题讨论】：

你为什么不去<div class="dx-field-value" data-bind="dxButton: { text: name.toUppercase(), onClick: $root.name }"></div>？
@connexo 您好，感谢您的评论。这不起作用，因为已经有一个 css 规则强制所有按钮文本为小写。我只是希望这个特定按钮的反转。

【解决方案1】：

使用dx-button-text 类名自定义您的按钮文本。

将所有按钮设为小写：

.dx-button-text {
    text-transform: lowercase;
}

然后，为你想要大写的按钮添加一个特定的 css 类：

<div data-bind="dxButton: { text: name }" class="uppercase"></div>

并应用以下规则：

.uppercase .dx-button-text {
    text-transform: uppercase;
}

【讨论】：