CSS classes are not applied (are overriden by the default css properties)

[Laurin S]

Hello,

I have a problem with all controls that my css classes, which is define as "className" and/or "cssClass"-property of the Syncfusion component/control, are not applied. In all the cases, first the default css-properties are used from the standard css-classes of the component, but the individual css-class of the className/cssClass-property are not applied, or in the words, were overriden by the standard classes.

How can I solve that?

Otherwise, the properties "className" and "cssClass" do not make much sense. Or at least, standard styling properties, like background, size, ... cannot be modified by (individual/situative) css classes.

I've attached a very simple example for better understanding.

Attachment: reactmkxvy1ho_fb62a40a.zip

[Mallesh Ravi Chandran]

When using Syncfusion React components, the styles you apply through className or cssClass may not appear because Syncfusion components come with built-in theme styles (Material, Bootstrap, Fluent, etc.). These theme files contain highly specific CSS rules that are applied directly to the wrapper and internal elements of each control. As a result, simple selectors such as .test-class { background: red; } have lower CSS specificity and are overridden by the default Syncfusion theme rules. This is why you may not see your custom background, padding, borders, or size applied immediately.

The cssClass property adds your class to the wrapper element of the component, while the className property adds your class to the direct input element inside the wrapper. Because Syncfusion controls are built from multiple nested elements, applying your own styles requires targeting the correct DOM structure. The className and cssClass add custom CSS classes to the component’s element. They provide a hook for applying your own styles or overriding default theme styles. Their purpose is to enable contextual and dynamic styling without altering Syncfusion’s core CSS.

API Reference : https://ej2.syncfusion.com/react/documentation/api/textbox/index-default#cssclass

However, to ensure your styles override the default theme, you must target the specific elements inside the Syncfusion wrapper using more precise selectors. The following CSS reliably applies a background color to a TextBox component because it matches the actual structure of the rendered HTML and carries stronger specificity than the default theme rules:

.e-input-group .test-class.e-textbox,
.e-input-group.test-class .e-textbox {
 background: red;
}

 <div className="col-xs-6 col-sm-6 col-lg-6 col-md-6">
          <TextBoxComponent
            placeholder="Test input"
            floatLabelType="Auto"
            className="test-class"
          />
        </div>
        <div className="col-xs-6 col-sm-6 col-lg-6 col-md-6">
          <TextBoxComponent
            placeholder="Test 2 input"
            floatLabelType="Auto"
            cssClass="test-class"
          />
        </div>

Sample : https://stackblitz.com/edit/react-ibzkqmzd-bs3hu7yn?file=index.js,index.html,index.css 

Using selectors like these lets your custom class override the internal Syncfusion styling, ensuring that the CSS applied through className or cssClass behaves as intended.