DevExtreme 覆盖 css 的 dxButton

Question

我有以下 dxButton 元素。

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

正在通过变量 name 分配按钮的文本。现在，我希望仅此 特定元素 的按钮文本始终为 uppercase。

我试过为它设置一个 id 和一个 class，并创建自定义 css，但它没有用。我也试过如下内联样式：

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

Answer 1

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

将所有按钮设为小写：

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

然后，将特定的 css class 添加到要大写的按钮：

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

并应用以下规则：

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

DevExtreme override css of dxButton