DevExtreme override css of dxButton

Question

I have the following dxButton element.

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

The text of the button is being assigned via the variable name. Now, I want the button text to be always uppercase for this specific element only.

I have tried setting an id and a class for it, and create custom css however it did not work. I have also tried inline styling as follows:

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

Answer 1

Use the dx-button-text class name to customize your button text.

Make all buttons lowercase:

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

Then, add a specific css class to the button you want to be uppercase:

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

And apply the following rule:

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

Demo.