Apply CSS to React wrapper

[Flav]

Hello, I have some trouble trying to apply CSS to a table with the React wrapper. Each time I apply something to it, it applies behind the table like the background color in this example : https://jsfiddle.net/Lnetgqw8/

Did I do something wrong to cause it to have this behavior or does the wrapper have a special way to get CSS applied ?

Thanks in advance for your help

[aleksandra_budnik]

Hi @Flav

In Handsontable we have some predefined classNames for elements

• activeHeaderClassName
• className
• commentedCellClassName
• currentColClassName
• currentHeaderClassName
• currentRowClassName
• invalidCellClassName
• noWordWrapClassName
• placeholderCellClassName
• readOnlyCellClassName
• tableClassName

However, to apply those we recommend adding .handsontable class to your CSS.

That makes your settings look like this

.handsontable .test {
  background-color: red;
}

Result

[Flav]

Thanks a lot ! I was starting to bang my head against the walls not understanding why the CSS was applied behind the table

[aleksandra_budnik]

Next time you would have any doubts let me know (here or on my email - support@handsontable.com)

ps. I will make sure to check if we haven’t missed that small but important rule in the docs.

[Flav]

I don’t think I’ve seen this rule in the doc since I don’t remember anything about CSS in the doc, but my memory could be betraying me

[aleksandra_budnik]

You’re memory is not doing any tricks with that one. This information is missing.
I’ve made a quick list of info I would add to the styling guide https://github.com/handsontable/docs/issues/298

We are planning to add themes to Handsontable. But as you already figured out we’ve spend most of the time creating what’s hidden (functionalities) and haven’t spend much time to share some styling guides. Nevetheless, I did not met a developer who left Handsontable as it is so that’s quite important to have that tutorial.