DevExtreme überschreiben CSS von DxButton

Question

Ich habe das folgende DxButton-Element.

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

Der Text der Schaltfläche wird über die Variable name zugewiesen. Jetzt möchte ich den Knopftext immer uppercase für dieses spezifische Element nur sein.

Ich habe versucht, eine ID und eine Klasse dafür zu setzen, und benutzerdefinierte CSS erstellen, aber es hat nicht funktioniert. Ich habe auch Inline-Styling versucht wie folgt:

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

Answer 1

Verwenden Sie die dx-button-text Klassennamen Ihre Schaltfläche Text anpassen.

Stellen Sie alle Tasten klein geschrieben:

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

Dann eine bestimmte CSS-Klasse auf die Schaltfläche Sie werden groß geschrieben möchten hinzufügen:

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

Und gilt die folgende Regel:

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

Demo.