fix(pivot-table): use scoped styles instead of global styles

[HendrikThePendric]

Implements DHIS2-14028

---

Key features

1. PivotTable now uses scoped styles which will not bleed out of the component

---

Description

The styles were probably originally declared using css.global because they should in fact affect nested components, and this doesn't happen normally because each component has its own CSS scope. But by making the entire style block global, plus using a generic CSS selector like table, the risk of these styles affecting other parts of the page becomes very significant.

What we need is "global" styles that impact sub-components but do not bleed out to sibling and parent components. In @dhis2/ui we have had to deal with this type of situation a lot and the most convenient pattern we established is the one I've applied here:

• The styles themselves are scoped (i.e. using styled-jsx's css and not css.global)
• Each selector starts with a scoped one that targets the container component element. NB: this is a div that is rendered by the PivotTableContainer component which imports these styles.
• Each selector is then followed by a global selector which means it does affect sub-components too

---

Test instructions

This fix can actually be verified without installing this analytics bundle into DV. You can just use the storybook to test things out.

---

Screenshots

Before

After