1

I am using kendo react for SPFx solution in my application and I am using kendo TabStrip and kendo TabStripTab components. But by default they come with their predefined styles added by kendo. So, the TabStrip and TabStripTab components already have 'className' property defined on them. So, my question is how do I apply my custom styles to the components. And where do I overwrite the kendo default classes.

Suppose if kendo TabStrip background color is white, I want to change it to black. But I couldn't find a way to do that.

Can I add another className attribute to the component or can I concatenate existing class name with the class name I want to apply.

I have tried following:

<Tabstrip selected={this.state.selected} className="red" />
<Tabstrip selected={this.state.selected} className={styles.red} />

But both didn't work. Please do suggest if I am doing the wrong way.

Gowthamss
  • 191
  • 1
  • 2
  • 13

1 Answers1

0

I see typo in className, you wrote claasName. Also if you are talking about making some features to your page like "dark/night mode", maybe styled components would be easiest solution.

Evren
  • 4,147
  • 1
  • 9
  • 16
  • 1
    Sorry for the typo, but I tried with className not claasName. As I used a TabStrip component, it comes with the classes like '.k-item' , '.k-link', 'k-tab-items' etc. How to use them in SASS file to apply styles or suppose he background color of the TabStrip component is white, how can change it into a red background. – Gowthamss Aug 28 '20 at 03:57